Este artículo le explicará cómo agregar el Plugin de JQuery Lazy Load para tu blog de Blogger o cualquier otro sitio web facilmente.Si tienes un blog o página web que contiene muchas imágenes, este super truco será muy útil para ti.Este puede reducir el tiempo de carga de la página de su sitio.Tu puede ver la página de prueba para ver el resultado.
Lazy loader es un plugin de jQuery escrito en JavaScript. Se retrasa la carga de imágenes a lo largo la de páginas web. Imágenes fuera del visor (parte visible de la página web) no será cargada antes solo cuando el usuario se desplaza sobre estas. Con carga perezosa en largas páginas web que contengan muchas imágenes de gran tamaño hace que la carga de la página sea más rápidamente. Navegador estará preparado después de cargar imágenes visibles. En algunos casos, también puede ayudar a reducir la carga del servidor.
Para agregar JQuery Lazy Load Plugin para tu blog de Blogger o cualquier otro sitio web siga los pasos que se indican a continuación:
1.Inicie sesión en blogger -> diseño--> Edición de HTML
2.Desplácese hasta donde se ve </ head>.
3.Copia el siguiente código y pégalo justo antes de la etiqueta </ head>.
<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<;
self.loaded = true;
})
.attr("src", $(self).attr("original"));
};
});
/* When wanted event is triggered load original image */
/* by triggering appear. */
if ("scroll" != settings.event) {
$(self).bind(settings.event, function(event) {
if (!self.loaded) {
$(self).trigger("appear");
}
});
}
});
/* Force initial check if images should appear. */
$(settings.container).trigger(settings.event);
return this;
};
/* Convenience methods in jQuery namespace. */
/* Use as $.belowthefold(element, {threshold : 100, container : window}) */
$.belowthefold = function(element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).height() + $(window).scrollTop();
} else {
var fold = $(settings.container).offset().top + $(settings.container).height();
}
return fold <= $(element).offset().top - settings.threshold;
};
$.rightoffold = function(element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).width() + $(window).scrollLeft();
} else {
var fold = $(settings.container).offset().left + $(settings.container).width();
}
return fold <= $(element).offset().left - settings.threshold;
};
$.abovethetop = function(element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).scrollTop();
} else {
var fold = $(settings.container).offset().top;
}
return fold >= $(element).offset().top + settings.threshold + $(element).height();
};
$.leftofbegin = function(element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).scrollLeft();
} else {
var fold = $(settings.container).offset().left;
}
return fold >= $(element).offset().left + settings.threshold + $(element).width();
};
/* Custom selectors for your convenience. */
/* Use as $("img:below-the-fold").something() */
$.extend($.expr[':'], {
"below-the-fold" : "$.belowthefold(a, {threshold : 0, container: window})",
"above-the-fold" : "!$.belowthefold(a, {threshold : 0, container: window})",
"right-of-fold" : "$.rightoffold(a, {threshold : 0, container: window})",
"left-of-fold" : "!$.rightoffold(a, {threshold : 0, container: window})"
});
})(jQuery);
//]]>
</script>
<script charset='utf-8' type='text/javascript'>
$(function() {
$("img").lazyload({placeholder : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio3aPiSOqv2LYzBDhNR_ZpfHsozTNHlrcBDbA9V8nDsFSwMUssG4k7UyX8ks6Z20HoDjNQWzBN76uV6LaTUZ8rOvBp8SxyTPR69-WgyOO1TfvyRkEnUCKNmGTtXS0XgpV2BMkQYUIWWq8/s1600/grey.gif",threshold : 200});
});
</script>
4.Ahora guardar la plantilla y Listo.Recarga su sitio para ver el resultado.
0 comentarios:
Publicar un comentario