圖片的賴加載(lazyLoad)

時間 2019-12-09

標籤圖片加載 lazyload 简体版

原文原文鏈接

懶加載的意義（在線demo預覽）

儘管不少公司的網頁都有一些限制，好比頁面的最大的圖片大小不得大於50k,也有不少圖片優化工具fis三、gulp等等，可是若是圖片太多仍是會影響頁面的加載速度，快則幾十秒慢則幾十分鐘，這樣會致使用戶流失。css

圖片的加載對頁面的加載速度有很大影響！！因此，對於圖片過多的頁面，爲了加速頁面加載速度，因此不少時候咱們須要將頁面內未出如今可視區域內的圖片先不作加載，等到滾動到可視區域後再去加載。這樣子對於頁面加載性能上會有很大的提高，也提升了用戶體驗，即圖片賴加載~html

原理

將頁面中的img標籤src指向一張小圖片或者src爲空，而後定義data-src（這個屬性能夠自定義命名，我才用data-src）屬性指向真實的圖片。git

當載入頁面時，先把可視區域內的img標籤的data-src屬性值負給src，而後監聽滾動事件，把用戶即將看到的圖片加載。這樣便實現了懶加載。github

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圖片賴加載</title>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <!-- 啓用webAPP全屏模式-->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- 隱藏狀態欄或者設置狀態欄的顏色-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- 忽略數字自動識別爲電話號碼-->
    <meta name="format-detection" content="telephone=no">
    <!--控制緩存的失效日期 -->
    <meta http-equiv="Expires" content="-1">
    <!-- 禁止轉碼-->
    <meta http-equiv="Cache-Control" content="no-cache">
    <!-- 禁止緩存訪問頁面-->
    <meta http-equiv="Pragma" content="no-cache">
    <meta name="applicable-device" content="mobile">
    <!-- 頁面關鍵詞-->
    <meta content="" name="keywords">
    <meta name="description" content="">
    <link rel="stylesheet" href="css/img_lazy.css">
</head>
<body>
    <div class="main">
        <img src="" data-src="images/1.jpg" alt="">
        <img src="" data-src="images/2.jpg" alt="">
        <img src="" data-src="images/3.jpg" alt="">
        <img src="" data-src="images/4.jpg" alt="">
        <img src="" data-src="images/5.jpg" alt="">
        <img src="" data-src="images/6.jpg" alt="">
        <img src="" data-src="images/7.jpg" alt="">
        <img src="" data-src="images/8.jpg" alt="">
    </div>
<!--圖片賴加載的JS-->
    <script src="js/imgLazyLoad.js"></script>
</body>
</html>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    border: 0;
    outline: 0;
}
.main{
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
}
img{
    display: block;
    width: 100%;
    height: 640px;
}

/**
 * Created by Administrator on 2016/11/28.
 */
!function(){
    var imgs = document.getElementsByTagName("img");
    var num = imgs.length;
    var n = 0; //存儲圖片加載到的位置，避免每次都從第一張圖片開始遍歷
    lazyload(); //頁面載入完畢加載但是區域內的圖片
    window.onscroll = lazyload;
    function lazyload() { //監聽頁面滾動事件
        var seeHeight = document.documentElement.clientHeight; //可見區域高度
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滾動條距離頂部高度
        for (var i = n; i < num; i++) {
            if (imgs[i].offsetTop < seeHeight + scrollTop) {
                if (imgs[i].getAttribute("src") == "") {
                    imgs[i].src = imgs[i].getAttribute("data-src");
                }
                n = i + 1;
            }
        }
    }
}();

相關標籤/搜索

每日一句

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