首页 / js教程

    前端项目中的图片加载优化方法

    类型:原创      发布者:php中世界最好的语言2018-03-13 17:36:17

    这次给大家带来前端项目中的图片加载优化方法,前端项目中图片加载优化方法的注意事项有哪些,下面就是实战案例,一起来看一下。

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

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

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

    纯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;
    }

    懒加载

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

    之前在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');

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

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

    .img{    min-height: 400px;
    }

    设置滚动事件

    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;

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

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

    相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    推荐阅读:

    关于JS继承的详解

    JS的函数节流使用

    用JS代码做出弹幕效果

    以上就是前端项目中的图片加载优化方法的详细内容,更多请关注php中文网其它相关文章!

php中文网赞助会员

PHP中文网

未登录