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>

;(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++;
                }

            }
        }
    }

javascript圖片懶載入與預載入的分析
2014-01-19
JavaScript
頁面圖片預載入與懶載入策略
2019-01-14
圖片懶載入
2019-03-04
圖片懶載入與下拉載入更新資料
2017-11-21
圖片預載入，圖片懶載入，和jsonp中的一個疑問
2019-02-16
JSON
圖片懶載入(IntersectionObserver)
2019-03-26
Server
圖片懶載入原理
2020-10-05
小說APP原始碼的圖片載入方式，懶載入和預載入的實現
2021-12-01
APP原始碼
圖片懶載入踩坑
2019-03-04
圖片懶載入大白話
2019-03-08
圖片懶載入實現
2019-07-16
懶載入和預載入
2018-05-29
圖片預載入和懶載入（附上一個小demo瀑布流）
2019-10-08
滾動載入圖片（懶載入）實現原理
2019-04-06
預載入圖片
2018-09-28
圖片懶載入js實現
2019-02-16
JS
Js圖片懶載入(lazyload)
2018-07-26
JS
[譯] React 16.6 懶載入(與預載入)元件
2019-01-06
React元件
“懶”的妙用——淺析圖片懶載入技術
2017-12-25
手把手實現圖片懶載入+封裝vue懶載入元件
2019-03-03
封裝Vue元件
實現圖片懶載入(throttle, debounce)
2019-03-21
[譯] 原生實現圖片懶載入
2019-04-25
React如何實現圖片懶載入
2019-01-28
React
實現圖片懶載入(Lazyload)
2016-11-27
前端優化之圖片懶載入
2018-06-12
前端優化
圖片懶載入外掛實戰
2016-07-28
單張圖片懶載入
2019-10-09
前端效能優化 --- 懶載入&預載入
2018-08-29
前端優化
實現圖片懶載入的三種方式
2018-06-26
vue圖片懶載入lazy-load
2018-10-08
Vue
1道面試題---懶載入和預載入
2018-05-30
面試題
圖片懶載入外掛echo.js分享
2017-04-12
JS
jQuery圖片預載入程式碼
2017-04-08
jQuery
js圖片預載入詳解
2017-04-06
JS
Javascript圖片預載入詳解
2016-07-04
JavaScript
如何實現圖片預載入和載入進度條
2023-09-24
layui圖片懶載入-loading佔點陣圖
2018-12-14
UI
懶載入
2018-08-22