前端图片加载优化

优能系统 前端开发 2017-10-11 23:21:15 196
摘要:图片预加载可以提高用户体验,对于图片画廊和图片占比很大的网页内容尤其重要
本文章由如下广告商联合赞助发布 广告

图片是界面显示效果很重要的组成部分,图片加载关系到用户体验、应用性能,优化图片加载的常用策略为:预加载和懒加载。 


原文链接

预加载

图片预加载可以提高用户体验,对于图片画廊和图片占比很大的网页内容尤其重要

css预加载

利用css的background属性可以预先加载图片,但不显示在屏幕位置内,使用这些图片时路径一致的话,浏览器会优先加载缓存内的图片进行显示,这样就达到了预加载的目的 
#preload-img{ 
background: url(http://example.com/image.png) no-repeat -9999px -9999px; 
}

但是这种方式会在刚开始页面加载时影响其他内容显示,可以添加一些js

window.onload = function () {
    let preload = document.createElement('div');
    preload.id = 'preload';
    document.body.appendChild(preload);
}123456

纯js预加载

利用js实例化图片对象,再赋值应用地址,这样可以实现批量图片预加载

window.onload = function () {
    let images = [
        'http://example.com/image1.png',
        'http://example.com/image2.png',
        'http://example.com/image3.png',
    ];

    images.forEach((src) => {
        preload(src);
    })
}

let preload = src => {
    let img = new Image();
    img.src = src;
}    
1234567891011121314151617

懒加载

图片懒加载对于服务器可以起到缓解压力的作用。

之前在js设计模式-代理模式中有通过虚拟代理方式实现图片懒加载的方法

let imageEle = (function(){
    let node = document.createElement('img');
    document.body.appendChild(node);
    return {
        setSrc:function(src){
            node.src = src;
        }
    }
})();

//代理对象
let proxy = (function(){
    let img = new Image();
    img.onload = function(){
        imageEle.setSrc(this.src);
    };
    return {
        setSrc:function(src){
            img.src = src;
            imageEle.setSrc('loading.gif');
        }
    }
})();

proxy.setSrc('example.png');    
1234567891011121314151617181920212223242526

对于一些内容很长页面,我们希望当用户浏览到相应区域时再加载图片,常用的解决方法是在img元素上使用data-src属性替换src,判断img元素在用户可视区域时动态赋值src属性显示相应图片。

如果是图片墙形式页面,为避免开始加载全部图片需要给图片设置默认高度

.img{
    min-height: 400px;
}1234

设置滚动事件

let imgs = document.getElementsByTagName("img");
let n = 0; //存储加载图片索引
let lazyload= ()=> {
    let cHeight = document.documentElement.clientHeight;
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
    for (let i = n,l = imgs.length; i < l; i++) {
        let img = imgs[i];
        if (img.offsetTop < cHeight + scrollTop) {
            img.src = img.src == 'loading.gif'? img.getAttribute('data-src'):img.src;
            n = i + 1;
        }
    }
}
window.onscroll = lazyload;123456789101112131415

滚动事件可以节流函数再进行优化

正确使用图片加载可以提高用户体验,保证页面的展示效果,同时又可以在一定程度上缓解服务器的压力,算是前端优化中经常涉及到的部分,了解其中的解决方法和策略可以帮助我们做出更好的产品。


s.jpg

版权声明

本文仅代表作者观点,不代表本站立场。

本文系作者授权本站发表,未经许可,不得转载。

本文章由如下广告商联合赞助发布 广告

发评论 请在法律允许的范围内发表您的言论!

验证代码:
点击输入框即可显示验证码
 

以下网友发言只代表其个人观点,不代表优能系统的观点或立场。

文章排行
  • 日榜
  • 月榜
Copyright © 2017 优能cms All Rights Reserved. 备案号:苏ICP备16004379号-1

在线客服

购买授权

公众号

广告投放

评论留言

回顶部