JS實現(xiàn)圖片懶加載(lazyload)過程詳解
對于圖片較多的頁面，使用懶加載可以大幅提高頁面加載速度，提高用戶體驗。
懶加載的意義（為什么要使用懶加載）
對頁面加載速度影響最大的就是圖片，一張普通的圖片可以達(dá)到幾M的大小，而代碼也許就只有幾十KB。當(dāng)頁面圖片很多時，頁面的加載速度緩慢，幾S鐘內(nèi)頁面沒有加載完成，也許會失去很多的用戶。
所以，對于圖片過多的頁面，為了加速頁面加載速度，所以很多時候我們需要將頁面內(nèi)未出現(xiàn)在可視區(qū)域內(nèi)的圖片先不做加載， 等到滾動到可視區(qū)域后再去加載。這樣子對于頁面加載性能上會有很大的提升，也提高了用戶體驗。
原理
將頁面中的img標(biāo)簽src指向一張小圖片或者src為空，然后定義data-src（這個屬性可以自定義命名，我才用data-src）屬性指向真實的圖片。src指向一張默認(rèn)的圖片，否則當(dāng)src為空時也會向服務(wù)器發(fā)送一次請求?？梢灾赶騦oading的地址。
注：圖片要指定寬高
<img src='http://www.aoyou183.cn/bcjs/default.jpg' data-src='http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg' />
當(dāng)載入頁面時，先把可視區(qū)域內(nèi)的img標(biāo)簽的data-src屬性值負(fù)給src，然后監(jiān)聽滾動事件，把用戶即將看到的圖片加載。這樣便實現(xiàn)了懶加載。
代碼
<head> <meta charset='UTF-8'> <title>Document</title> <style> img { display: block; margin-bottom: 50px; width: 400px; height: 400px; } </style></head><body> <img src='http://www.aoyou183.cn/bcjs/default.jpg' data-src='http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg' alt=''> <img src='http://www.aoyou183.cn/bcjs/default.jpg' data-src='http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg' alt=''> <img src='http://www.aoyou183.cn/bcjs/default.jpg' data-src='http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg' alt=''> <img src='http://www.aoyou183.cn/bcjs/default.jpg' data-src='http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg' alt=''> <img src='http://www.aoyou183.cn/bcjs/default.jpg' data-src='http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg' alt=''> <img src='http://www.aoyou183.cn/bcjs/default.jpg' data-src='http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg' alt=''> <img src='http://www.aoyou183.cn/bcjs/default.jpg' data-src='http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg' alt=''> <img src='http://www.aoyou183.cn/bcjs/default.jpg' data-src='http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg' alt=''> <img src='http://www.aoyou183.cn/bcjs/default.jpg' data-src='http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg' alt=''> <img src='http://www.aoyou183.cn/bcjs/default.jpg' data-src='http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg' alt=''> <img src='http://www.aoyou183.cn/bcjs/default.jpg' data-src='http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg' alt=''></body>
JavaScript
<script> var num = document.getElementsByTagName(’img’).length; var img = document.getElementsByTagName('img'); var n = 0; //存儲圖片加載到的位置，避免每次都從第一張圖片開始遍歷 lazyload(); //頁面載入完畢加載可是區(qū)域內(nèi)的圖片 window.onscroll = lazyload; function lazyload() { //監(jiān)聽頁面滾動事件 var seeHeight = document.documentElement.clientHeight; //可見區(qū)域高度 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滾動條距離頂部高度 for (var i = n; i < num; i++) { if (img[i].offsetTop < seeHeight + scrollTop) {if (img[i].getAttribute('src') == 'default.jpg') { img[i].src = img[i].getAttribute('data-src');}n = i + 1; } } }</script>
jQuery
<script> var n = 0, imgNum = $('img').length, img = $(’img’); lazyload(); $(window).scroll(lazyload); function lazyload(event) { for (var i = n; i < imgNum; i++) { if (img.eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())) {if (img.eq(i).attr('src') == 'default.jpg') { var src = img.eq(i).attr('data-src'); img.eq(i).attr('src', src); n = i + 1;} } } }</script>
使用節(jié)流函數(shù)進(jìn)行性能優(yōu)化
如果直接將函數(shù)綁定在scroll事件上，當(dāng)頁面滾動時，函數(shù)會被高頻觸發(fā)，這非常影響瀏覽器的性能。
我想實現(xiàn)限制觸發(fā)頻率，來優(yōu)化性能。
節(jié)流函數(shù)：只允許一個函數(shù)在N秒內(nèi)執(zhí)行一次。下面是一個簡單的節(jié)流函數(shù)：
// 簡單的節(jié)流函數(shù)//fun 要執(zhí)行的函數(shù)//delay 延遲//time 在time時間內(nèi)必須執(zhí)行一次function throttle (fun, delay, time) { let timeout let startTime = new Date() return function () { let context = this let args = Array.prototype.slice.call(arguments) let curTime = new Date() clearTimeout(timeout) if (curTime - startTime >= time) { // 如果達(dá)到了規(guī)定的觸發(fā)時間間隔，觸發(fā) handler fun.apply(context, args) startTime = curTime } else { // 沒達(dá)到觸發(fā)間隔，重新設(shè)定定時器 timeout = setTimeout(function () { fun.apply(context, args) }, delay) } }};// 實際想綁定在 scroll 事件上的 handlerfunction lazyload(event) {}// 采用了節(jié)流函數(shù)window.addEventListener(’scroll’,throttle(lazyload,500,1000));
使用去抖函數(shù)進(jìn)行性能優(yōu)化
去抖相比較節(jié)流函數(shù)要稍微簡單一點，去抖是讓函數(shù)延遲執(zhí)行，而節(jié)流比去抖多了一個在一定時間內(nèi)必須要執(zhí)行一次。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. .NET SkiaSharp 生成二維碼驗證碼及指定區(qū)域截取方法實現(xiàn)2. 如何在jsp界面中插入圖片3. JSP數(shù)據(jù)交互實現(xiàn)過程解析4. PHP循環(huán)與分支知識點梳理5. XML基本概念XPath、XSLT與XQuery函數(shù)介紹6. AspNetCore&MassTransit Courier實現(xiàn)分布式事務(wù)的詳細(xì)過程7. jsp實現(xiàn)登錄界面8. 低版本IE正常運行HTML5+CSS3網(wǎng)站的3種解決方案9. ASP.NET泛型三之使用協(xié)變和逆變實現(xiàn)類型轉(zhuǎn)換10. jsp+servlet簡單實現(xiàn)上傳文件功能（保存目錄改進(jìn)）
網(wǎng)公網(wǎng)安備