ECMAScript擴充套件 -12 【圖片的預載入與懶載入】

可樂雪碧薄荷糖發表於2020-11-20
套件

一.圖片預載入

(1).多張圖片

通過例項化Image物件 呼叫onload方法來實現(onload之後)

var oDiv = document.getElementsByClassName('div')[0],
    img = ['https://zza.jpg', 'https://zzb.jpg'];
    img.forEach(function(elem){
        var oImg = new Image();
        oImg.src = elem;
        oImg.style.width = '100%';
        oImg.onload = function(){
            oDiv.appendChild(oImg);
        }
    })

(2).單張照片

var oDiv = document.getElementsByTagName('div')[0],
var oImg = new Image();
oImg.src = 'https://zzz.jpg';
oImg.style.width = '100%';
oImg.onload = function(){
    oDiv.appendChild(oImg);
}

二.圖片懶載入

(1).實現思路

1.首先正常渲染，但是真正的路徑要放到data-src中去

2.獲取當前視窗高度，滾動高度

3.滾動時進行判讀，如果當前元素距離視窗高度小於視窗高度+滾動高度則將data-src中的資料放到src中(記得要加上防抖或者節流)

4.刪除data-src屬性

5.讓n來控制迴圈開始數(防止滾回去還會操作src的問題)

6.控制頁面重新整理後讓滾動條復位(要加延遲否則可能不生效)

(2).實現程式碼

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    <div>
        <ul class="img-list J_imgList"></ul>
    </div>
    <div style="display: none;" id="J_data">
      [{
      "img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581004370914&di=1724f04a58ec9850f168ed5a1faac7d1&imgtype=0&src=http%3A%2F%2Fthumb11.jfcdns.com%2Fthumb%2F2018-05%2Fbce5b03e404d7f24_600_566.jpeg","name":"圖片1"
      },
        {
      "img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581004370914&di=1724f04a58ec9850f168ed5a1faac7d1&imgtype=0&src=http%3A%2F%2Fthumb11.jfcdns.com%2Fthumb%2F2018-05%2Fbce5b03e404d7f24_600_566.jpeg","name":"圖片2"
      },
      {
      "img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581004370914&di=1724f04a58ec9850f168ed5a1faac7d1&imgtype=0&src=http%3A%2F%2Fthumb11.jfcdns.com%2Fthumb%2F2018-05%2Fbce5b03e404d7f24_600_566.jpeg","name":"圖片3"
      },
      {
      "img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581004370914&di=1724f04a58ec9850f168ed5a1faac7d1&imgtype=0&src=http%3A%2F%2Fthumb11.jfcdns.com%2Fthumb%2F2018-05%2Fbce5b03e404d7f24_600_566.jpeg","name":"圖片4"
      },
      {
      "img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581004370914&di=1724f04a58ec9850f168ed5a1faac7d1&imgtype=0&src=http%3A%2F%2Fthumb11.jfcdns.com%2Fthumb%2F2018-05%2Fbce5b03e404d7f24_600_566.jpeg","name":"圖片5"
      },
      {
      "img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581004370914&di=1724f04a58ec9850f168ed5a1faac7d1&imgtype=0&src=http%3A%2F%2Fthumb11.jfcdns.com%2Fthumb%2F2018-05%2Fbce5b03e404d7f24_600_566.jpeg","name":"圖片6"
      },
      {
      "img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581004370914&di=1724f04a58ec9850f168ed5a1faac7d1&imgtype=0&src=http%3A%2F%2Fthumb11.jfcdns.com%2Fthumb%2F2018-05%2Fbce5b03e404d7f24_600_566.jpeg","name":"圖片7"
      },
      {
      "img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581004370914&di=1724f04a58ec9850f168ed5a1faac7d1&imgtype=0&src=http%3A%2F%2Fthumb11.jfcdns.com%2Fthumb%2F2018-05%2Fbce5b03e404d7f24_600_566.jpeg","name":"圖片8"
      },
      {
      "img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581004370914&di=1724f04a58ec9850f168ed5a1faac7d1&imgtype=0&src=http%3A%2F%2Fthumb11.jfcdns.com%2Fthumb%2F2018-05%2Fbce5b03e404d7f24_600_566.jpeg","name":"圖片9"
      },
      {
      "img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581004370914&di=1724f04a58ec9850f168ed5a1faac7d1&imgtype=0&src=http%3A%2F%2Fthumb11.jfcdns.com%2Fthumb%2F2018-05%2Fbce5b03e404d7f24_600_566.jpeg","name":"圖片10"
      },
      {
      "img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581004370914&di=1724f04a58ec9850f168ed5a1faac7d1&imgtype=0&src=http%3A%2F%2Fthumb11.jfcdns.com%2Fthumb%2F2018-05%2Fbce5b03e404d7f24_600_566.jpeg","name":"圖片11"
      },
      {
      "img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581004370914&di=1724f04a58ec9850f168ed5a1faac7d1&imgtype=0&src=http%3A%2F%2Fthumb11.jfcdns.com%2Fthumb%2F2018-05%2Fbce5b03e404d7f24_600_566.jpeg","name":"圖片12"
      },
      {
      "img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581004370914&di=1724f04a58ec9850f168ed5a1faac7d1&imgtype=0&src=http%3A%2F%2Fthumb11.jfcdns.com%2Fthumb%2F2018-05%2Fbce5b03e404d7f24_600_566.jpeg","name":"圖片13"
      },
      {
      "img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581004370914&di=1724f04a58ec9850f168ed5a1faac7d1&imgtype=0&src=http%3A%2F%2Fthumb11.jfcdns.com%2Fthumb%2F2018-05%2Fbce5b03e404d7f24_600_566.jpeg","name":"圖片14"
      },
      {
      "img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581004370914&di=1724f04a58ec9850f168ed5a1faac7d1&imgtype=0&src=http%3A%2F%2Fthumb11.jfcdns.com%2Fthumb%2F2018-05%2Fbce5b03e404d7f24_600_566.jpeg","name":"圖片15"
      }
      ]
    </div>
    <script type="text/html" id="J_imgTpl">
        <li class="img-item">
        <div class="img-wrap">
            <img src="q.png" alt="cc" data-src="{{img}}" class="img"  style="width: 100px;height:100px"/>
         </div>
         <div class="img-tt">
             <h1>{{name}}</h1>
         </div>
        </li>
    </script>
    <script src="js/utils.js"></script>
    <script src="js/index.js"></script>
</body>
</html>

js

;(function(doc){
    var oUl = doc.getElementsByClassName('J_imgList')[0],
        jdata = JSON.parse(doc.getElementById('J_data').innerHTML),
        jImpl = doc.getElementById('J_imgTpl').innerHTML,
        img = doc.getElementsByClassName('img');
    function init(){
        oUl.innerHTML=renderList(jdata);
        bindEvent();
        setTimeout(function(){
            window.scroll(0, 0);
        },150)
    }
    function bindEvent(){
        document.onscroll = window.onload = debounce(imgLazyLoad(img),2000,false)
        // addElemEvent(document,'scroll',throttle(imgLazyLoad(img),2000),false);
        // addElemEvent(window,'load',throttle(imgLazyLoad(img),2000),false);
    }
    function renderList(jdata){
        var list = "";
        jdata.myForEach(function(elem){
            list += jImpl.replace(/{{(.*?)}}/g,function(node, key){
                return{
                  img: elem.img
                }[key]
            })
        });
        return list;
    }

    init();

}(document));
 function imgLazyLoad(img){
        var imgLen = img.length,
            n = 0;//這樣就不會每次滾動都去刪除data
        return function(){
            var cHeight = browseSeeDist().height,//瀏覽器高度
                cScrol = browseScrollDist().top,//滾動距離
                imgItem;
            for(var i = n; i < imgLen; i++){
                imgItem = img[i];
                //當前圖片是否小於高度+距離
                if(imgItem.offsetTop < cHeight+cScrol){

                    imgItem.src = imgItem.getAttribute('data-src');
                    imgItem.removeAttribute('data-src');
                     n++;
                }

            }
        }
    }

相關文章