性能优化--图片懒加载

懒加载

懒加载也叫做延迟加载、按需加载；

优点：减少无用资源的加载、提升用户体验、防止加载过多图片而影响其他资源文件的加载

防止页面一次性向服务器发送大量请求，导致服务器响应面，页面卡顿崩溃

实现

图片的加载是由src引起的，当对src赋值时，浏览器就会请求图片资源。

根据这个原理，我们使用HTML5 的data-xxx属性来储存图片的路径，在需要加载图片的时候，将data-xxx中图片的路径赋值给src，这样就实现了图片的按需加载，即懒加载。

图片加载条件：img.offsetTop < window.innerHeight + document.body.scrollTop

imgs.offsetTop 是元素顶部距离文档顶部的高度（包括滚动条的距离）

window.innerHeight 是浏览器可视区的高度

document.body.scrollTop || document.documentElement.scrollTop 是浏览器滚动的过的距离

<div class="container">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
     ... ...
</div>
<script>
var imgs = document.querySelectorAll('img');
function lozyLoad(){
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    var winHeight= window.innerHeight;
    for(var i=0;i < imgs.length;i++){
        if(imgs[i].offsetTop < scrollTop + winHeight ){
            imgs[i].src = imgs[i].getAttribute('data-src');
        }
    }
}
window.onscroll = lozyLoad();
</script>

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 }
}
window.addEventListener('scroll',lazyLoad);

懒加载与预加载的区别

懒加载也叫延迟加载，指的是在长网页中延迟加载图片的时机，当用户需要访问时，再去加载，

这样可以提高网站的首屏加载速度，提升用户的体验，并且可以减少服务器的压力

预加载指的是将所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。

通过预加载能够减少用户的等待时间，提高用户的体验。 缺点：增加服务器压力，首页加载渲染时间长。

在浏览器加载页面window.onload时创建image对象并赋值src链接 。

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