图片懒加载

原理

目的： 减少请求数或者是延迟请求数，优化性能

实现方式：1、滚动条检测，仅加载可视区的图片

　　　　　2、条件加载， 符合条件或者是触发事件时加载

　　　　　3、延迟加载， setTimeout或者是setInteval

方式一实现图片懒加载原理：

　　1.将图片的真实地址暂存在一个自定义属性中，例如lazy-src中，src地址用其他图片或者是占位图片代替

　　2.计算可视区域，当图片位置出现在可视区域内时，将src替换为真实的地址，加载图片

　　eg：

<img src="../imgs/substitute.png" lazy-src="imgs/demo.png"/>

实现：

html：

<ul id="gallary">
    <li><a href="#" title="picture1"><img lazy-src="../images/1.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture2"><img lazy-src="../images/2.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture3"><img lazy-src="../images/3.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture4"><img lazy-src="../images/4.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture5"><img lazy-src="../images/5.jpg" src="../images/placeholder.png"></a></li>
....
.....
</ul>

js:

//load the image
function loadImg(index){
    var gallary = document.getElementById("gallary");
    var img = gallary.children[index].children[0].children[0];
    var src = img.getAttribute("lazy-src");
    img.src = src;
}

//get the height of the object
function getHeight(obj){
    var height = 0;
    while(obj){
        height += obj.offsetTop;
        obj = obj.offsetParent;
    }
    return height;
}

//examine the state of the window
window.onscroll = function(){
    var gallary = document.getElementById("gallary");
    var lis = gallary.children;
    var seeHeight,
        li,
        height;
    for(var i=0, len=lis.length; i<len; i++){
        li = lis[i];
        seeHeight = document.documentElement.clientHeight + document.body.scrollTop;  
        height = getHeight(li);
        if(height < seeHeight){
            loadImg(i);
        }
    }
}

window.onload = function(){
    window.onscroll();
}

效果：

完整代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body{
    background: url(../images/12.jpg);
    background-size: cover;

}
#gallary{
    margin: 10px auto;
    padding: 40px;
    list-style: none;
    width:1060px;
}
#gallary li{
    float: left;
    width: 206px;
    height: 160px;
    oveflow: visible;
}
#gallary li a{
    color: #333;
    text-decoration: none;
    font-size: 4px;
    display: block;
    text-align: center;
    background-color: #FFF;
    padding: 3px;
    opacity: 0.8;
    box-shadow: 0 0 5px 2px #333;
}
#gallary li a{
    -webkit-transition: all 500ms linear;
    -moz-transition: all 500ms linear;
    transition: all 500ms linear;

    -webkit-transfrom-origin: 0 0;
    -moz-transfrom-origin: 0 0;
    transfrom-origin: 0 0;

    -webkit-transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
    transform: rotate(-15deg);

}

#gallary li a img{
    width: 200px;
}
#gallary li:nth-child(3n) a{
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    transform: rotate(20deg);
}
#gallary li:nth-child(4n) a{
    -webkit-transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    transform: rotate(15deg);
}
#gallary li:nth-child(7n) a{
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    transform: rotate(-10deg);
}
#gallary li:nth-child(9n) a{
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    transform: rotate(-20deg);
}
#gallary li a:hover{
    position: relative;
    z-index: 1;
    opacity: 1;
    -webkit-transform: rotate(0deg) scale(2);
    -moz-transform: rotate(0deg) scale(2);
    transform: rotate(0deg) scale(2);
}
#gallary li a:hover:after{
    content: attr(title);
}

</style>
</head>
<body>
<ul id="gallary">
    <li><a href="#" title="picture1"><img lazy-src="../images/1.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture2"><img lazy-src="../images/2.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture3"><img lazy-src="../images/3.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture4"><img lazy-src="../images/4.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture5"><img lazy-src="../images/5.jpg" src="../images/placeholder.png"></a></li>
     <li><a href="#" title="picture1"><img lazy-src="../images/1.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture2"><img lazy-src="../images/2.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture3"><img lazy-src="../images/3.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture4"><img lazy-src="../images/4.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture5"><img lazy-src="../images/5.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture7"><img lazy-src="../images/7.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture8"><img lazy-src="../images/8.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture9"><img lazy-src="../images/9.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture10"><img lazy-src="../images/10.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture6"><img lazy-src="../images/11.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture1"><img lazy-src="../images/1.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture2"><img lazy-src="../images/2.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture3"><img lazy-src="../images/3.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture4"><img lazy-src="../images/4.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture5"><img lazy-src="../images/5.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture7"><img lazy-src="../images/7.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture8"><img lazy-src="../images/8.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture9"><img lazy-src="../images/9.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture10"><img lazy-src="../images/10.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture6"><img lazy-src="../images/11.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture1"><img lazy-src="../images/1.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture2"><img lazy-src="../images/2.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture3"><img lazy-src="../images/3.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture4"><img lazy-src="../images/4.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture5"><img lazy-src="../images/5.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture7"><img lazy-src="../images/7.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture8"><img lazy-src="../images/8.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture9"><img lazy-src="../images/9.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture10"><img lazy-src="../images/10.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture6"><img lazy-src="../images/11.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture1"><img lazy-src="../images/1.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture2"><img lazy-src="../images/2.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture3"><img lazy-src="../images/3.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture4"><img lazy-src="../images/4.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture5"><img lazy-src="../images/5.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture7"><img lazy-src="../images/7.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture8"><img lazy-src="../images/8.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture9"><img lazy-src="../images/9.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture10"><img lazy-src="../images/10.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture6"><img lazy-src="../images/11.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture1"><img lazy-src="../images/1.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture2"><img lazy-src="../images/2.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture3"><img lazy-src="../images/3.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture4"><img lazy-src="../images/4.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture5"><img lazy-src="../images/5.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture7"><img lazy-src="../images/7.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture8"><img lazy-src="../images/8.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture9"><img lazy-src="../images/9.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture10"><img lazy-src="../images/10.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture6"><img lazy-src="../images/11.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture1"><img lazy-src="../images/1.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture2"><img lazy-src="../images/2.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture3"><img lazy-src="../images/3.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture4"><img lazy-src="../images/4.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture5"><img lazy-src="../images/5.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture7"><img lazy-src="../images/7.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture8"><img lazy-src="../images/8.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture9"><img lazy-src="../images/9.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture10"><img lazy-src="../images/10.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture6"><img lazy-src="../images/11.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture1"><img lazy-src="../images/1.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture2"><img lazy-src="../images/2.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture3"><img lazy-src="../images/3.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture4"><img lazy-src="../images/4.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture5"><img lazy-src="../images/5.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture7"><img lazy-src="../images/7.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture8"><img lazy-src="../images/8.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture9"><img lazy-src="../images/9.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture10"><img lazy-src="../images/10.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture6"><img lazy-src="../images/11.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture1"><img lazy-src="../images/1.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture2"><img lazy-src="../images/2.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture3"><img lazy-src="../images/3.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture4"><img lazy-src="../images/4.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture5"><img lazy-src="../images/5.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture7"><img lazy-src="../images/7.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture8"><img lazy-src="../images/8.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture9"><img lazy-src="../images/9.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture10"><img lazy-src="../images/10.jpg" src="../images/placeholder.png"></a></li>
    <li><a href="#" title="picture6"><img lazy-src="../images/11.jpg" src="../images/placeholder.png"></a></li>
</ul>

<script>
//load the image
function loadImg(index){
    var gallary = document.getElementById("gallary");
    var img = gallary.children[index].children[0].children[0];
    var src = img.getAttribute("lazy-src");
    img.src = src;
}

//get the height of the object
function getHeight(obj){
    var height = 0;
    while(obj){
        height += obj.offsetTop;
        obj = obj.offsetParent;
    }
    return height;
}

//examine the state of the window
window.onscroll = function(){
    var gallary = document.getElementById("gallary");
    var lis = gallary.children;
    var seeHeight,
        li,
        height;
    for(var i=0, len=lis.length; i<len; i++){
        li = lis[i];
        seeHeight = document.documentElement.clientHeight + document.body.scrollTop;  
        height = getHeight(li);
        if(height < seeHeight){
            loadImg(i);
        }
    }
}

window.onload = function(){
    window.onscroll();
}
</script>

</body>
</html>
View Code
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/wishyouhappy/p/3851864.html