Cargando fuente de imagen apropiada para sitio web adaptable-RIMG
| Autor: | |
|---|---|
| Views Total: | 2,081 |
| Sitio oficial: | Ir a la web |
| Actualizado: | January 8, 2014 |
| Licencia: | MIT |
Vista prévia
Descripción
RIMG es una biblioteca de JavaScript para la imagen adaptable que hace uso de las consultas de medios para determinar el origen de imagen adecuado y actualizar en consecuencia cuando el tamaño de la ventana alcanza el punto de interrupción. Funciona con todos los navegadores modernos e incluso Internet Explorer 8/9. Útil para optimizar imágenes en su página web para reducir el tiempo de carga y ahorrar el ancho de banda.
Uso básico
Agregue el siguiente fragmento de código HTML en la sección Head de la página.
<meta name="viewport" content="width=device-width, initial-scale=1">
Incluya el script RIMG. js en la página.
<script src="rimg.min.js"></script>
Establezca los puntos de interrupción en el código JavaScript.
<script> var RimgBreakpoint = '-tiny 320w 1x, -tiny-retina 320w 2x, -small 480w 1x, -small-retina 480w 2x, -medium 600w 1x, -medium-retina 600w 2x, -regular 768w 1x, -regular-retina 768w 2x, -large 1024w 1x, -large-retina 1024w 2x, -huge w 1x'; </script>
Inserte una etiqueta IMG con el atributo Data-src para especificar el origen de la imagen.
<img data-src="images/image.jpg"/>
