Biblioteca de JavaScript para cambiar el origen de la imagen según el tamaño de la ventana: imagen dinámica
| Autor: | jockbert |
|---|---|
| Views Total: | 1,864 |
| Sitio oficial: | Ir a la web |
| Actualizado: | February 28, 2015 |
| Licencia: | MIT |
Vista prévia
Descripción
Imagen dinámica es una biblioteca de JavaScript ligera que intercambia dinámicamente el origen de la imagen en función del tamaño de la ventanilla. Ideal para el diseño web adaptable para reducir el tiempo de carga de la página y guardar el ancho de banda del servidor.
Funcionamiento
Incluya dynamicImage. min. js en la Página Web.
<script src="dynamicImage.min.js"></script>
Añada una imagen con el atributo ' src ' vacío a la Página Web.
<img id="aPhoto" src="" style="width:100%" >
Habilite la imagen dinámica y defina una matriz de imágenes para diferentes tamaños de pantalla.
var myImage = new DynamicImage("aPhoto");
myImage.setWidthAlternatives(
[100,150,200,300,500,750,1000,1500,2000,3008],
["100.jpg",
"150.jpg",
"200.jpg",
"300.jpg",
"500.jpg",
"750.jpg",
"1000.jpg",
"1500.jpg",
"2000.jpg",
"original.jpg"]);
window.onresize = myImage.delayedUpdate;
