如何實現圖片懶加載

時間 2019-11-16

標籤如何實現圖片加載简体版

原文原文鏈接

1、什麼是懶加載html

將圖片src先賦值爲一張默認圖片，當用戶滾動滾動條到可視區域圖片的時候，再去加載後續真正的圖片前端

若是用戶只對第一張圖片感興趣，那剩餘的圖片請求就能夠節省了ajax

2、爲何要引入懶加載chrome

懶加載（LazyLoad）是前端優化的一種有效方式，極大的提高用戶體驗。圖片一直是頁面加載的流浪大戶，如今一張圖片幾兆已是很正常的事，遠遠大於代碼的大小。假若一次ajax請求10張圖片的地址，一次性把10張圖片都加載出來，確定是不合理的。瀏覽器

3、懶加載實現的原理前端優化

先將img標籤中的src連接設置爲空，將真正的圖片連接放在自定義屬性（data-src），當js監聽到圖片元素進入到可視窗口的時候，將自定義屬性中的地址存儲到src中，達到懶加載的效果。函數

4、懶加載中涉及的屬性優化

1 、document.documentElement.clientHeight; //表示瀏覽器可見區域高度：spa

document.body.clientHeight //是整個頁面內容的高度，而非瀏覽器可見區域的高度.net

2 、document.documentElement.scrollTop; //滾動條已滾動的高度：

chrome 中 document.body.scrollTop //滾動條滾過的高度

那麼要獲得滾動條的高度：有一個技巧：

　　var scrollTop=document.body.scrollTop || document.documentElement.scrollTop;

　　這兩個值總會有一個恆爲0，因此不用擔憂會對真正的scrollTop形成影響。一點小技巧，但很實用。

三、 offsetTop、offsetLeft

　　obj.offsetTop 指 obj 距離上方或上層控件的位置，整型，單位像素。

　　obj.offsetLeft 指 obj 距離左方或上層控件的位置，整型，單位像素。

　　obj.offsetWidth 指 obj 控件自身的寬度，整型，單位像素。

　　obj.offsetHeight 指 obj 控件自身的高度，整型，單位像素。

offsetParent 不一樣於parentNode ,offsetParent 返回的是在結構層次中與這個元素最近的position爲absolute\relative\static的元素或者body

具體滾動時涉及的屬性值，請參考https://blog.csdn.net/zh_rey/article/details/78967174很是詳細

5、懶加載的實現

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lazyload 2</title>
    <style>
    img {
        display: block;
        margin-bottom: 50px;
        height: 200px;
    }
    </style>
</head>
<body>
    <img src="images/loading.gif" data-src="images/1.png">
    <img src="images/loading.gif" data-src="images/2.png">
    <img src="images/loading.gif" data-src="images/3.png">
    <img src="images/loading.gif" data-src="images/4.png">
    <img src="images/loading.gif" data-src="images/5.png">
    <img src="images/loading.gif" data-src="images/6.png">
    <img src="images/loading.gif" data-src="images/7.png">
    <img src="images/loading.gif" data-src="images/8.png">
    <img src="images/loading.gif" data-src="images/9.png">
    <img src="images/loading.gif" data-src="images/10.png">
    <img src="images/loading.gif" data-src="images/11.png">
    <img src="images/loading.gif" data-src="images/12.png">
    

<script>
    function throttle(fn, delay, atleast) {//函數綁定在 scroll 事件上，當頁面滾動時，避免函數被高頻觸發，
        var timeout = null,//進行去抖處理
        startTime = new Date();
        return function() {
           　　var curTime = new Date();
        　　　　clearTimeout(timeout);
       　　　　 if(curTime - startTime >= atleast) {
        　　    fn();
           　　 startTime = curTime;
        　　　　}else {
           　　　　 timeout = setTimeout(fn, delay);
        　　　　}
        }
    }
    function lazyload() {
        var images = document.getElementsByTagName('img');
        var len    = images.length;
        var n      = 0;      //存儲圖片加載到的位置，避免每次都從第一張圖片開始遍歷        
        return function() {
        　　　　var seeHeight = document.documentElement.clientHeight;
       　　　　 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
     　　　　   for(var i = n; i < len; i++) {
           　　　　 if(images[i].offsetTop < seeHeight + scrollTop) {
               　　　　 if(images[i].getAttribute('src') === 'images/loading.gif') {
               　　　　　　  images[i].src = images[i].getAttribute('data-src');
               　　　　 }
           　　　　　　 n = n + 1;
            　　　　}
        　　　　}
        }
    }
    var loadImages = lazyload();
    loadImages();          //初始化首頁的頁面圖片


    window.addEventListener('scroll', throttle(loadImages, 500, 1000), false);
　　//函數節流（throttle）與函數去抖（debounce）處理,
//500ms 的延遲，和 1000ms 的間隔，當超過 1000ms 未觸發該函數，則當即執行該函數，否則則延遲 500ms 執行該函數
    </script>
</body>
</html>

參考文章：

http://www.javashuo.com/article/p-mfrrjyfh-ha.html

https://blog.csdn.net/xiongzhengxiang/article/details/7551598

https://blog.csdn.net/zh_rey/article/details/78967174

相關標籤/搜索

每日一句

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