码迷,mamicode.com
首页 > 其他好文 > 详细

图片懒加载

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

标签:style   blog   http   color   os   width   

 

原理


 

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

 

实现方式: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

图片懒加载

标签:style   blog   http   color   os   width   

原文地址:http://www.cnblogs.com/wishyouhappy/p/3851864.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!