【优化】图片加载

原创 zhaocchen 随笔 全栈 142阅读 2018-10-09 21:58:41 举报

常规建议:

多从加载资源的格式及大小入手。 例如图标使用icon-font、svg、雪碧图, 以及base64等新格式图片。

google在2010年推出的webp。

图片瀑布,则是建议使用懒加载的方式,即拖动滚动的条事件再一次进行加载。

一些新建议:

  1. 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);
    }

  2. google, 预加载 ,加载背景为图片主要颜色, 随后显示加载完成的图片

blog

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复