前端讲解图片懒加载

图片懒加载

懒加载的原理：
图片预加载：就是在网页全部加载之前，提前加载图片，当用户需要查看时可直接从本地缓存中渲染，以提供给用户更好的体验，减少等待的时间。

图片懒加载（缓载）：延迟加载图片或符合某些条件时才加载某些图片。

懒加载的实现：
HTML部分：

    <h1>js懒加载</h1>


    <div class="box">


        <img src="" class="img" lazyload="true" data-original="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg">


        <img src="" class="img" lazyload="true" data-original="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg">


        <img src="" class="img" lazyload="true" data-original="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg">


        <img src="" class="img" lazyload="true" data-original="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg">


        <img src="" class="img" lazyload="true" data-original="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg">


        <img src="" class="img" lazyload="true" data-original="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg">


        <img src="" class="img" lazyload="true" data-original="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg">


        <img src="" class="img" lazyload="true" data-original="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg">


        <img src="" class="img" lazyload="true" data-original="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg">






    </div>


</div>

JS部分：
window.onload = function () {

//获取当前浏览器的视口高度


var viewHeight = document.documentElement.clientHeight;


//鼠标滚动回调


function lazyload() {


    var img = document.getElementsByClassName('img'); //获取所有图片集合


    //遍历图片集合


    for (let item of img) {


        //获取图片距视口顶部的距离


        var imgHeight = item.getBoundingClientRect();


        //判断当图片出现在视口160px时把地址放到src中，显示出图片


        if (imgHeight.top < (viewHeight - 200)) {


            item.src = item.getAttribute("data-original")


        }


    }


}


lazyload();    //页面加载时把当前视口中的图片加载进来


document.addEventListener('scroll', lazyload);

}

预加载：
css部分：
*html{

margin:0;

padding:0;

border:0;

}

body{border:1px solid #f3f3f3; background:#fefefe}

div#loading{

width:950px;

height:265px;

line-height:265px;

overflow:hidden;

position:relative;

text-align:center;

}

div#loading p{

position:static;

+position:absolute;

top:50%;

vertical-align:middle;

}

div#loading p img{

position:static;

+position:relative;

top:-50%;left:-50%;

vertical-align:middle

}

HTML部分：

<p><img src="" class="img" lazyload="true" data-original="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"></p>

js部分：

var i=0;

var c=3;

var imgarr=new Array

imgarr[0]=“http://www.baidu.com/img/baidu_logo.gif”;

imgarr[1]=“http://img.baidu.com/img/logo-img.gif”;

imgarr[2]=“http://img.baidu.com/img/logo-zhidao.gif”;

var Browser=new Object();

Browser.userAgent=window.navigator.userAgent.toLowerCase();

Browser.ie=/msie/.test(Browser.userAgent);

Browser.Moz=/gecko/.test(Browser.userAgent);

function SImage(url,callback)

{

var img = new Image();

if(Browser.ie){

img.onreadystatechange =function(){

if(img.readyState==“complete”||img.readyState==“loaded”){

ii=i+1;

callback(i);

}

}

}else if(Browser.Moz){

img.οnlοad=function(){

if(img.complete==true){

ii=i+1;

callback(i);

}

}

}

img.src=url;

}

function icall(v)

{

if(v

SImage(""+imgarr[v]+"",icall);

}

else if(v>=c){

i=0;

//location.replace(‘banner.html’);//这里写自己的动作吧，

}

}

图片预加载与懒加载的区别：
两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预载则会增加服务器前端压力。

原理：先将img标签的src链接设为同一张图片（比如空白图片），然后给img标签设置自定义属性（比如 data-src）,然后将真正的图片地址存储在data-src中，当JS监听到该图片元素进入可视窗口时，将自定义属性中的地址存储到src属性中。达到懒加载的效果。这样做能防止页面一次性向服务器发送大量请求，导致服务器响应面，页面卡顿崩溃等。