首页 > 其他 > 详细

图片懒加载

时间：2014-07-18 09:36:51      阅读：505      评论：0      收藏：0      [点我收藏+]

 

原理

 

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

 

实现方式：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();
}

 

效果：

bubuko.com,布布扣

 

bubuko.com,布布扣

 

 

完整代码：

 

bubuko.com,布布扣 
<!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

图片懒加载,布布扣,bubuko.com

图片懒加载

原文：http://www.cnblogs.com/wishyouhappy/p/3851864.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！