Retrasar la carga de cualquier cosa con aplazar. js

Vista prévia

Descripción

Aplazar. js es una pequeña y ligera biblioteca de JavaScript que retrasa la carga de recursos web para mejorar la velocidad de la página.

Soporta JavaScript, CSS, Image, iframe y mucho más.

Funcionamiento

Cargue la versión minimizada de la biblioteca aplazada. js en el documento.

<script src="defer.min.js"></script>

Aplazar la carga de JavaScript dentro del documento. En este ejemplo, el script de destino esperará 3 segundos para cargarse después de que la página esté completamente cargada.

// deferscript(src, id, delay, callback)
deferscript('target.js', 'target-id', 2000, function() {

// do something
});

Aplazar la carga de CSS dentro del documento.

// deferstyle(src, id, delay)
deferstyle('target.css', 'target-id', 2000);

Carga diferida de imágenes dentro del documento.

<img class="demo"


 data-src="target.jpg">

deferimg('demo', 100, 'loaded', function(img) {

img.onload = function() {


img.classList.add('show');

}
});

Iframes de carga diferida dentro del documento. Ideal para vídeos de YouTube & Vimeo.

<iframe class="video"




data-src="https://www.youtube.com/embed/VIDEO-ID"
>
</iframe>

deferiframe('video', 100, 'loaded', function(frame) {

frame.onload = function() {


frame.classList.add('show');

}
});

Registro de cambios

v1.0.11 (03/12/2019)

• Se eliminó el contexto de la función aplazar () (utilice FUNC. BIND (Context))
• Establezca 80 MS (equivale a 5 ciclos de tick del navegador) como tiempo de retardo predeterminado
• Añadido el alias jQuery-like $ para aplazar (), útil cuando jQuery no se ha cargado
• Refactorización de código, eliminar códigos no utilizados
• Polyfill mejorado para IE 9 ~ 11

v1.0.9 (03/01/2019)

• Fix "Object no admite la propiedad o el método ' forEach '" para IE