【优化】图片加载
常规建议:
多从加载资源的格式及大小入手。 例如图标使用icon-font、svg、雪碧图, 以及base64等新格式图片。
google在2010年推出的webp。
图片瀑布,则是建议使用懒加载的方式,即拖动滚动的条事件再一次进行加载。
一些新建议:
- Medium ,先加载缩略图完后再加载高清原图。
window.onload = function() {
var placeholder = document.querySelector('.placeholder'),
small = placeholder.querySelector('.img-small')
// 1: load small image and show it
var img = new Image();
img.src = small.src;
img.onload = function () {
small.classList.add('loaded');
};
// 2: load large image
var imgLarge = new Image();
imgLarge.src = placeholder.dataset.large;
imgLarge.onload = function () {
imgLarge.classList.add('loaded');
};
placeholder.appendChild(imgLarge);
}
- google, 预加载 ,加载背景为图片主要颜色, 随后显示加载完成的图片