圖片懶加載

時間 2019-12-04

標籤圖片加載简体版

原文原文鏈接

原理

目的：減小請求數或者是延遲請求數，優化性能css

實現方式：一、滾動條檢測，僅加載可視區的圖片html

　　　　　二、條件加載，符合條件或者是觸發事件時加載web

　　　　　三、延遲加載， setTimeout或者是setIntevalide

方式一實現圖片懶加載原理：性能

　　1.將圖片的真實地址暫存在一個自定義屬性中，例如lazy-src中，src地址用其餘圖片或者是佔位圖片代替優化

　　2.計算可視區域，當圖片位置出如今可視區域內時，將src替換爲真實的地址，加載圖片url

　　eg：spa

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

實現：

html：code

<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:orm

//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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。