生活随笔
收集整理的這篇文章主要介紹了
网页性能优化02-懒加载工作原理
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
懶加載工作原理
1.1-懶加載介紹（以圖片懶加載為例）
1.為什么要有懶加載技術
- （1）img標簽特點：不管圖片隱藏還是顯示 有src屬性都會去加載
- 例如電商類網站，一個頁面有幾百張圖片。有時候假設用戶不滾動，也會加載圖片資源，此時非常損耗網頁性能
- （2）那么如果頁面上有太多的圖片 而且有些圖片不在可視窗口內 如果加載了會影響頁面的渲染頁面時間。
- 判斷網頁是否使用圖片懶加載技術：滾動網頁的時候，圖片會動態加載（一般會有一個漸變動畫，例如京東）
2.如何實現懶加載技術
- 核心原理：延遲加載： 當圖片進入可視區域內容的時候才去加載
- 實現思路
- 1.將圖片真實資源放入一個自定義屬性中
- 2.監聽頁面滾動條事件
- 3.判斷圖片是否進入頁面可視區域
- 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>window.onscroll = function(e){console.log(document.scrollTop + document.clientHeight);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>
總結
以上是生活随笔為你收集整理的网页性能优化02-懒加载工作原理的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
