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

实践

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