Biblioteca ligera de JS para la carga perezosa elementos DOM-sofá

Vista prévia

Descripción

Couch es una pequeña biblioteca de JavaScript independiente que se utiliza para cargar perezosos cualquier elemento DOM con una sutil animación de diapositivas impulsada por transiciones y transformaciones CSS3.

Uso básico

Coloque el sofá. js al final del documento.

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

Envolver los elementos DOM que desea la carga diferida en un elemento contenedor con un identificador único ' sofá '.

<div id="couch">

<img data-src="1.svg">

<img data-src="2.svg">

<img data-src="3.svg">

...
</div>

Las reglas CSS/CSS3 para animar los elementos DOM a medida que entran en la vista.

#couch { max-width: 100%; }

#couch > * {

opacity: 0;

max-width: 100%;

display: block;

margin: 100px auto 100px auto;

transform: translateY(100px);
}

.onscreen {

opacity: 1 !important;

transition: 1s ease;

-webkit-transition: 1s ease;

-moz-transition: 1s ease;

-o-transition: 1s ease;

-ms-transition: 1s ease;

transform: translateY(0px) !important;

-webkit-transform: translateY(0px) !important;

-moz-transform: translateY(0px) !important;

-o-transform: translateY(0px) !important;

-ms-transform: translateY(0px) !important;
}

Configuración de la funcionalidad de carga diferida.

var couch = new Couch('couch', {

// sets the distance from the bottom the element needs to be to be loaded
threshold: -1,

 // sets the delay between loading elements.
delay: 10

});