981
京東網上商城
圖片的賴加載(lazyLoad)
懶加載的意義（在線demo預覽）
盡管很多公司的網頁都有一些限製，比如頁麵的最大的圖片大小不得大於50k,也有很多圖片優化工具fis3、gulp等等，但是如果圖片太多還是會影響頁麵的加載速度，快則幾十秒慢則幾十分鍾，這樣會導致用戶流失。
圖片的加載對頁麵的加載速度有很大影響！！所以，對於圖片過多的頁麵，為了加速頁麵加載速度，所以很多時候我們需要將頁麵內未出現在可視區域內的圖片先不做加載， 等到滾動到可視區域後再去加載。這樣子對於頁麵加載性能上會有很大的提升，也提高了用戶體驗，即圖片賴加載~
原理
將頁麵中的img標簽src指向一張小圖片或者src為空，然後定義data-src（這個屬性可以自定義命名，我才用data-src）屬性指向真實的圖片。
當載入頁麵時，先把可視區域內的img標簽的data-src屬性值負給src，然後監聽滾動事件，把用戶即將看到的圖片加載。這樣便實現了懶加載。
<!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; } } } }();
最後更新：2017-11-05 11:34:48