當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

网页性能优化02-懒加载工作原理

發(fā)布時間：2024/9/30 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了网页性能优化02-懒加载工作原理小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

懶加載工作原理

1.1-懶加載介紹（以圖片懶加載為例）

1.為什么要有懶加載技術(shù)

（1）img標(biāo)簽特點(diǎn)：不管圖片隱藏還是顯示有src屬性都會去加載
- 例如電商類網(wǎng)站，一個頁面有幾百張圖片。有時候假設(shè)用戶不滾動，也會加載圖片資源，此時非常損耗網(wǎng)頁性能
（2）那么如果頁面上有太多的圖片而且有些圖片不在可視窗口內(nèi) 如果加載了會影響頁面的渲染頁面時間。
- 判斷網(wǎng)頁是否使用圖片懶加載技術(shù)：滾動網(wǎng)頁的時候，圖片會動態(tài)加載（一般會有一個漸變動畫，例如京東）

2.如何實(shí)現(xiàn)懶加載技術(shù)

核心原理：延遲加載：當(dāng)圖片進(jìn)入可視區(qū)域內(nèi)容的時候才去加載
實(shí)現(xiàn)思路
- 1.將圖片真實(shí)資源放入一個自定義屬性中
  - 自定義屬性作用：存儲圖片路徑，此時圖片不會加載
- 2.監(jiān)聽頁面滾動條事件
- 3.判斷圖片是否進(jìn)入頁面可視區(qū)域
- 4.取出圖片的自定義屬性，賦值給圖片的src屬性（此時真正加載圖片資源）
示例代碼如下：

<!doctype html> <html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>* {margin: 0;padding: 0;}ul {list-style: none;width: 1000px;margin: 0 auto;}ul li {width: 230px;height: 230px;float: left;margin-right: 20px;margin-bottom: 20px;}ul li.last {margin-right: 0;}ul li img {width: 100%;height: 100%;display: block;opacity: 0;/* 過渡動畫 */transition: all 5s linear;}</style> </head><body><div style="height: 1000px;;background-color: rgba(200, 111, 111, 0.5)"></div><ul id="ul1"><li><img data-src="http://img.daimg.com/uploads/allimg/160324/1-160324232117.jpg" alt=""></li><li><img data-src="http://img.daimg.com/uploads/allimg/160318/1-16031P01P0.jpg" alt=""></li><li><img data-src="http://img.daimg.com/uploads/allimg/160318/1-16031P01332.jpg" alt=""></li><li><img data-src="http://img.daimg.com/uploads/allimg/160318/1-16031P01332.jpg" alt=""></li></ul><script>/* 懶加載工作原理 *///0. 將圖片的資源放入自定義屬性中（例如data-src）//1.監(jiān)聽頁面滾動條事件window.onscroll = function(e){console.log(document.scrollTop + document.clientHeight);//2.如果圖片進(jìn)入可視區(qū)域（假如400px）,則取出自定義屬性，賦值給src屬性（真正加載）//ul是否進(jìn)入可視區(qū)域：滾動條距離 + 頁面可視區(qū)域高度 > 盒子高度if(document.documentElement.scrollTop + document.documentElement.clientHeight > 1000){var imgList = document.querySelectorAll('li>img');for(var i = 0;i<imgList.length;i++){imgList[i].style.opacity = 1;//過渡動畫imgList[i].src = imgList[i].getAttribute('data-src');//過渡動畫};}};</script> </body></html>

總結(jié)

以上是生活随笔為你收集整理的网页性能优化02-懒加载工作原理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：网页性能优化01-精灵图利弊与应用场景
下一篇：网页性能优化03-函数防抖