May 14, 2016
Precarga de imágenes para mejorar la experiencia de usuario
Realizar una carga correcta de imágenes nos puede ayudar a mejorar la experiencia de usuario reduciendo considerablemente el tiempo de espera
Cuando hablamos de experiencia de usuario hablamos del cuidado de cada detalle. Una carga rápida puede suponer la diferencia clave para que un usuario prefiera nuestra web a otra. Si hablamos de proyectos móviles esto cobra especial importancia, ya que las conexiones con las que trabajamos suelen ser de muy baja calidad.
¿Cómo podemos agilizar la carga?
Existen infinidad de elementos a tener en cuenta, sin embargo hoy nos vamos a centrar en la carga de imágenes, ya que en términos estadísticos suelen ser archivos muy pesados. Para agilizar su carga podemos realizar diferentes técnicas como por ejemplo utilizar una librería que nos cargue las imágenes de forma progresiva. Esta técnica es muy recomendable para páginas con alto contenido editorial y donde el navegador tiene que hacer multitud de llamadas a imágenes para terminar de cargar todo el contenido.
Javascript
Un ejemplo realizado por Lorenzo Giuliani muestra como mediante este pequeño javascript podemos conseguir el efecto del que hablamos. Para ello tendremos que utilizar blank.gif por defecto en el atributo src y definir el with y height al final para mantener el tamaño que posteriormente tendrá la imagen cargada.
<img src=”blank.gif” class=”lazy” data-src=”my_image.png” width=”400" height=”600">/* lazyload.js (c) Lorenzo Giuliani
* MIT License (http://www.opensource.org/licenses/mit-license.html)
*
* expects a list of:
* `<img src=”blank.gif” data-src=”my_image.png” width=”600" height=”400" class=”lazy”>`
*/! function(window) {
var $q = function(q, res) {
if (document.querySelectorAll) {
res = document.querySelectorAll(q);
} else {
var d = document,
a = d.styleSheets[0] || d.createStyleSheet();
a.addRule(q, ‘f:b’);
for (var l = d.all, b = 0, c = [], f = l.length; b < f; b++)
l[b].currentStyle.f && c.push(l[b]); a.removeRule(0);
res = c;
}
return res;
}, addEventListener = function(evt, fn) {
window.addEventListener ? this.addEventListener(evt, fn, false) : (window.attachEvent) ? this.attachEvent(‘on’ + evt, fn) : this[‘on’ + evt] = fn;
}, _has = function(obj, key) {
return Object.prototype.hasOwnProperty.call(obj, key);
}; function loadImage(el, fn) {
var img = new Image(),
src = el.getAttribute(‘data-src’);
img.onload = function() {
if ( !! el.parent)
el.parent.replaceChild(img, el)
else
el.src = src; fn ? fn() : null;
}
img.src = src;
} function elementInViewport(el) {
var rect = el.getBoundingClientRect() return (
rect.top >= 0 && rect.left >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight)
)
} var images = new Array(),
query = $q(‘img.lazy’),
processScroll = function() {
for (var i = 0; i < images.length; i++) {
if (elementInViewport(images[i])) {
loadImage(images[i], function() {
images.splice(i, i);
});
}
};
};
// Array.prototype.slice.call is not callable under our lovely IE8
for (var i = 0; i < query.length; i++) {
images.push(query[i]);
}; processScroll();
addEventListener(‘scroll’, processScroll);}(this);
Lazy Load
Si lo tuyo no es el javascript te propongo que utilices Lazy Load, un plugin de jQuery que nos ayuda a cargar las imágenes de forma progresiva conforme el usuario hace scroll.
