懒加载与预加载的区别

理论

懒加载： 延迟加载图片，达到加载条件时再加载。
原理：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);
   }