关于vue.js:懒加载预加载

WEB性能优化–图片媒体篇

目标为了晋升客户端成果体验。

原生js实现（懒加载）

• 原理：图片的getBoundingClientRect().top高度 是否小于以后可视视图高度，小于则把data-src的url替换给src

1、第一种办法：获取对应元素举例顶部的间隔来判断。

// onload是等所有的资源文件加载结束当前再绑定事件
window.onload = function(){
    // 获取图片列表，即img标签列表
    var imgs = document.querySelectorAll('img');

    // 获取到浏览器顶部的间隔
    function getTop(e){
        return e.getBoundingClientRect().top;
    }

    // 懒加载实现
    function lazyload(imgs){
        // 可视区域高度
        var h = window.innerHeight;
        //滚动区域高度
        
        for(var i=0;i<imgs.length;i++){
            //图片间隔顶部的间隔大于可视区域和滚动区域之和时懒加载
            if (h>getTop(imgs[i])) {
                // 真实情况是页面开始有2秒空白，所以应用setTimeout定时2s
                (function(i){
                    setTimeout(function(){
                        // 不加立刻执行函数i会等于9
                        // 隐形加载图片或其余资源，
                        //创立一个长期图片，这个图片在内存中不会到页面下来。实现隐形加载
                        var temp = new Image();
                        temp.src = imgs[i].getAttribute('data-src');//只会申请一次
                        // onload判断图片加载结束，真是图片加载结束，再赋值给dom节点
                        temp.onload = function(){
                            // 获取自定义属性data-src，用真图片替换假图片
                            imgs[i].src = imgs[i].getAttribute('data-src')
                        }
                    },2000)
                })(i)
            }
        }
    }
    lazyload(imgs);

    // 滚屏函数
    window.onscroll =function(){
        lazyload(imgs);
    }
}

2、第二种办法：利用intersectionObserver-api监听元素是否进入到可视区域（较第一种办法更简略）

// 利用es6写法
    const imgsBox = [...document.querySelectorAll('img')];
    
    function lazyload(){
        for(let i = 0;i<imgsBox.length;i++){
            const imgsTarget = imgsBox[I];
            if(isVisable(imgsTarget)){
                imgsTarget.src = imgsTarget.dataset.src;
                imgsTarget.splice(i,1);//取得图片后出数组
                i--;
            }
        }
    }
 
    //判断图片是否再可视化区域
    function isVisable(imgsTarget){
        let targetRect =  imgsTarget.getBoundingClientRect();
        
        return targetRect.bottom >0 && targetRect.top < window.innerHeight && targetRect.right >0 && targetRect.left < window.innerWight;
    }
    
    lazyload();
    window.onscroll = function(){
        lazyload();
    }
    
    //onscroll也能够写成
    
    window.addEventListener('scroll',lazyload,false);
    //false 示意冒泡

上诉办法因为scroll是高频发事件，所以用的时候最好应用节流函数。

function throttle(fn,wait,context){
    var timer = null;
    return function(...args){
        var context = context || this;
        var args = arguments;
        if(!timer){
            timer = setTimeout(function(){
                fn.apply(context,args);
                timer = null;
            },wait)
        }
    }
}
    
window.addEventListener('scroll',throttle(lazyload,250),false);

    

原生js（图片预加载）

• 提前加载下一张图片，基于promise实现

    <img id='imgbox' />

 const imgs = [ ]; //用来寄存图片src的数组，理论状况是去后盾取的值
 
 const imgBox = document.getElementById('imgbox');
 //取到寄存src的图片盒子，通过预加载替换src
 
 //这里用点击图片替换图片来实现预加载
 
 let i = 0; //用来取数组图片src
 imgBox.addEventListener('click', ()=>{
    if(i < imgs.length){
     imgBox.src = imgs[i];
     i++;
        if(i< imgs.length){
            preLoad(imgs[i]).then(data=>{ //这个data就是咱们 return 的promise对象，传入imgs[i]的 });
        }
    }else{
        //此时是数组最初一张图片
    }
     
 },false)
 
    function preLoad(src){
        return new Promise(reslove,reject)=>{
           const imgBox = document.getElementById('imgbox');
           imgBox.src = src;
           imgBox.addEventerListener('load',()=>{reslove(imgBox)});
           imgBox.addEventerListener('error',()=>{reject()});
        }
    }

借鉴学习：https://juejin.cn/post/703445…

巧用lazysizes.js 插件实现懒加载

• 这个插件应用益处介于高频发、无论元素是否ajax实现，lazysizes都能够拾取到。
• 下载lazysizes.min.js 脚本。（或通过 npm:npm install lazysizes –save或 bower装置bower install lazysizes –save）
• 应用办法: 官网应用例子
• 官网文档：github