图片的赖加载(lazyLoad)
生活随笔
收集整理的這篇文章主要介紹了
图片的赖加载(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;}}} }();?
轉載于:https://www.cnblogs.com/-walker/p/6108866.html
總結
以上是生活随笔為你收集整理的图片的赖加载(lazyLoad)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 夺宝奇兵3希特勒签名是真的吗
- 下一篇： 透明度的兼容写法