Biblioteca de carga diferida de recursos de mejora progresiva-DemandJS

Tiempo de ejecución: 30 minutos. Empezar

Autor: hannasm
Views Total: 688
Sitio oficial: Ir a la web
Actualizado: January 19, 2018
Licencia: MIT

Vista prévia

Biblioteca de carga diferida de recursos de mejora progresiva-DemandJS

Descripción

DemandJS es una biblioteca de carga diferida JavaScript moderna, de alto rendimiento y de mejora progresiva que retrasa la carga de recursos Web (por ejemplo, imágenes, videos, iframes) hasta que entran en la vista.

¿Cómo funciona?

Importe el archivo JavaScript compilado en el documento.

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

Inicialice las DemandJS para cargar perezosas todas las imágenes, vídeos e iframes dentro del documento.

window.DemandJSDemanded = new DemandJS();
window.DemandJSDemanded = new DemandJS({

demandClassAttribute: 'data-demand',

defaultDemandClass: 'default',

loadingHtml: '<div style="width:100%;height:100%">Loading In Progress</div>',

failureHtml: '<div style="background-color:#F00;color:#FFF;font-size:20pt;">ERROR</div>',

createLoadingNode: function createLoadingNode(t) {


return _this4.createLoadingNode(t);

},

createFailureNode: function createFailureNode(t, ex) {


return _this4.createFailureNode(t, ex);

},

shouldRemove: function shouldRemove(t) {


return !('tagName' in t) || !t.tagName.match(/link/i);

},

shouldInsertOnLoad: function shouldInsertOnLoad(t) {


return _this4.options.shouldRemove(t);

},

selector: 'img,video,picture,iframe,link.demand',

ignoreSelector: '.nodemand',

rootMargin: '48px',

threshold: 0.001,

onLoadBegin: function onLoadBegin(t) {


return _this4.onLoadBegin(t);

},

onLoadSuccess: function onLoadSuccess(t) {


return _this4.onLoadSuccess(t);

},

onLoadFailure: function onLoadFailure(t, e) {


return _this4.onLoadFailure(t, e);

},

onLoadComplete: function onLoadComplete(t) {


return _this4.onLoadComplete(t);

},

linkHandler: {


'text/html': function textHtml(t, c) {



return _this4.injectHtml(t, c);


},


'application/xhtml+xml': function applicationXhtmlXml(t, c) {



return _this4.injectHtml(t, c);


}

}
});

Te puede interesar: