Entrega inteligente de imágenes interactivas en JavaScript-SmartImages

Vista prévia

Descripción

SmartImages es una pequeña biblioteca de JavaScript independiente, lista para la retina, para la entrega de imágenes inteligentes que tiene la capacidad de cargar dinámicamente y mostrar la imagen de acuerdo con el ancho de la pantalla. Soporta dispositivos de escritorio, móviles y retina.

Funcionamiento

Coloque la versión minimizada de SmartImages. js en el documento HTML.

<script src="smartImages.js"></script>

Especifique los orígenes de imagen en distintos puntos de rotura en los atributos de datos como se muestra a continuación:

<img

data-src="desktop.png"

data-size="980x400"

data-src-mobile="mobile.png"

data-size-mobile="320x150"

data-src-mobile-2x="mobile-2x.png"

data-size-mobile-2x="640x300"

data-src-custom="custom.png"

data-size-custom="750x400"

data-match-custom="(min-width: 640px) and (max-width: 750px)"
/>

Si desea cargar la imagen perezosa, simplemente agregue el atributo ' Data-Lazy ' a su etiqueta IMG.

<img

data-src="desktop.png"

data-size="980x400"

data-src-mobile="mobile.png"

data-size-mobile="320x150"

data-src-mobile-2x="mobile-2x.png"

data-size-mobile-2x="640x300"

data-src-custom="custom.png"

data-size-custom="750x400"

data-match-custom="(min-width: 640px) and (max-width: 750px)"

data-lazy
/>

La biblioteca también admite imágenes de fondo:

<img

data-smartImageContainer

data-src="desktop.png"

data-size="980x400"

data-src-mobile="mobile.png"

data-size-mobile="320x150"

data-src-mobile-2x="mobile-2x.png"

data-size-mobile-2x="640x300"

data-src-custom="custom.png"

data-size-custom="750x400"

data-match-custom="(min-width: 640px) and (max-width: 750px)"

data-lazy
/>