关于前端:懒加载与预加载的区别

实践

懒加载： 提早加载图片，达到加载条件时再加载。
原理：img的src属性初始不搁置理论须要的链接，而是存在data-url属性中，达到某条件后再动静充值src属性值为data-url里的链接地址，实现懒加载。
作用：加重服务器压力，节约流量，页面加载速度快。
预加载：提前加载图片，当用户须要查看时是间接从浏览器缓存里取的资源，用户操作体验速度快。
原理：在浏览器加载页面时创立image对象并赋值src链接
作用：让用户有疾速的冲浪体验。
毛病：减少服务器压力，首页加载渲染工夫长。
区别： 懒加载与预加载都有进步用于体验成果，然而优化体验成果的出发点不同，懒加载能够加重服务器压力，然而预加载会减少服务器压力；

实现

懒加载实现

    // 这里以滚动可视区内懒加载需要为例    var imgs=document.getElementsByTagName('img');    var viewHeight=document.ducumentElement.clientHeight;        // 检测img元素是否在可视区    function inView (img){        var rectObject=document.getBoundingClientRect();          if(rectObject.bottom >= 0 && rectObject.top < viewHeight){            return true        }else{            return false        }    }        function lazyLoad(arr){        for(let i=0;i<arr.length;i++){            if(inView(arr[i])){                arr[i].src=arr[i].dataset.url;            }        }    }        window.addEventListener('scroll',lazyLoad);    

预加载实现

   var imgs=['./1.jpg','./2.jpg','./3.jpg'];   var imgsDom=[];      function preLoad(arr){        for(let i=0;i<arr.length;i++){            let item=new Image();            item.src=imgs[i];            imgsDom.push(item);        }   }      window.onload=function(){        preLoad(imgs);   }