Lazy Load en Blogger | LazyLoad | Como hacerlo
"La carga diferida (en inglés lazy loading) es un patrón de diseño comúnmente usado en la programación informática que consiste en retrasar la carga o inicialización de un objeto hasta el mismo momento de su utilización. Esto contribuye a la eficiencia de los programas, evitando la precarga de objetos que podrían no llegar a utilizarse. El opuesto de la carga diferida es la carga previa, precarga o eager loading."
La carga de imagenes con Lazy Load permite que el sitio web se cargue mucho más rápido ya que cargará solo lo que el usuario esta viendo en ese momento y conforme continue por el sitio se iran cargando sucesivamente.
La velocidad aumentará y tus lectores verán una mejora sustancial solo tienes que usar el siguiente código por supuesto asegurate de tener jQuery así que busca en el html "Ctrl+F" pero igual te dejo aquí como debería quedar asegurate de ponerlo entre la etiqueta "head"
La carga de imagenes con Lazy Load permite que el sitio web se cargue mucho más rápido ya que cargará solo lo que el usuario esta viendo en ese momento y conforme continue por el sitio se iran cargando sucesivamente.
La velocidad aumentará y tus lectores verán una mejora sustancial solo tienes que usar el siguiente código por supuesto asegurate de tener jQuery así que busca en el html "Ctrl+F" pero igual te dejo aquí como debería quedar asegurate de ponerlo entre la etiqueta "head"
<script async='async' src='//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'/>
<script async='async' type='text/javascript'>
//<;
self.loaded = true;
}).attr("src", $(self).attr("original"));
};
});
if ("scroll" != settings.event) {
$(self).bind(settings.event, function(event) {
if (!self.loaded) {
$(self).trigger("appear");
}
});
}
});
$(settings.container).trigger(settings.event);
return this;
};
$.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();
};
$.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);
$(document).ready(function($) {
$('img').lazyload({
effect: 'fadeIn',
placeholder: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWxyD5mr9OGRpH-5ub9sUx8e34tVXaxYw7foQb9Q1AVaZV_qOTqHtTQEmkXiZ3GMVZrrd9n0_evFDlEO7yBWZ0eIcmTcPonuzLMYZFg9ldLNMfJFD9TufvdHFdNKQ2lzFMWMX7bhkWEJQ/s1/bg_placeholder.png'
});
});
}
//]]>
</script>
Comentarios
Publicar un comentario