图片的赖加载(lazyLoad)
懶加載的意義（在線demo預(yù)覽）
盡管很多公司的網(wǎng)頁(yè)都有一些限制，比如頁(yè)面的最大的圖片大小不得大于50k,也有很多圖片優(yōu)化工具fis3、gulp等等，但是如果圖片太多還是會(huì)影響頁(yè)面的加載速度，快則幾十秒慢則幾十分鐘，這樣會(huì)導(dǎo)致用戶流失。
圖片的加載對(duì)頁(yè)面的加載速度有很大影響！！所以，對(duì)于圖片過(guò)多的頁(yè)面，為了加速頁(yè)面加載速度，所以很多時(shí)候我們需要將頁(yè)面內(nèi)未出現(xiàn)在可視區(qū)域內(nèi)的圖片先不做加載， 等到滾動(dòng)到可視區(qū)域后再去加載。這樣子對(duì)于頁(yè)面加載性能上會(huì)有很大的提升，也提高了用戶體驗(yàn)，即圖片賴(lài)加載~
原理
將頁(yè)面中的img標(biāo)簽src指向一張小圖片或者src為空，然后定義data-src（這個(gè)屬性可以自定義命名，我才用data-src）屬性指向真實(shí)的圖片。
當(dāng)載入頁(yè)面時(shí)，先把可視區(qū)域內(nèi)的img標(biāo)簽的data-src屬性值負(fù)給src，然后監(jiān)聽(tīng)滾動(dòng)事件，把用戶即將看到的圖片加載。這樣便實(shí)現(xiàn)了懶加載。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>圖片賴(lài)加載</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"><!-- 隱藏狀態(tài)欄或者設(shè)置狀態(tài)欄的顏色--><meta name="apple-mobile-web-app-status-bar-style" content="black"><!-- 忽略數(shù)字自動(dòng)識(shí)別為電話號(hào)碼--><meta name="format-detection" content="telephone=no"><!--控制緩存的失效日期 --><meta http-equiv="Expires" content="-1"><!-- 禁止轉(zhuǎn)碼--><meta http-equiv="Cache-Control" content="no-cache"><!-- 禁止緩存訪問(wèn)頁(yè)面--><meta http-equiv="Pragma" content="no-cache"><meta name="applicable-device" content="mobile"><!-- 頁(yè)面關(guān)鍵詞--><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> <!--圖片賴(lài)加載的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; //存儲(chǔ)圖片加載到的位置，避免每次都從第一張圖片開(kāi)始遍歷lazyload(); //頁(yè)面載入完畢加載可是區(qū)域內(nèi)的圖片window.onscroll = lazyload;function lazyload() { //監(jiān)聽(tīng)頁(yè)面滾動(dòng)事件var seeHeight = document.documentElement.clientHeight; //可見(jiàn)區(qū)域高度var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滾動(dòng)條距離頂部高度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;}}} }();?
轉(zhuǎn)載于:https://www.cnblogs.com/-walker/p/6108866.html
總結(jié)
以上是生活随笔為你收集整理的图片的赖加载(lazyLoad)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 夺宝奇兵3希特勒签名是真的吗
- 下一篇： 透明度的兼容写法