懶加載工作原理
1.1-懶加載介紹（以圖檔懶加載為例）
1.為什麼要有懶加載技術
- （1）img标簽特點：不管圖檔隐藏還是顯示 有src屬性都會去加載
- 例如電商類網站，一個頁面有幾百張圖檔。有時候假設使用者不滾動，也會加載圖檔資源，此時非常損耗網頁性能
- （2）那麼如果頁面上有太多的圖檔 而且有些圖檔不在可視視窗内 如果加載了會影響頁面的渲染頁面時間。
- 判斷網頁是否使用圖檔懶加載技術：滾動網頁的時候，圖檔會動态加載（一般會有一個漸變動畫，例如京東）
網頁性能優化02-懶加載工作原理懶加載工作原理
- 判斷網頁是否使用圖檔懶加載技術：滾動網頁的時候，圖檔會動态加載（一般會有一個漸變動畫，例如京東）
2.如何實作懶加載技術
-
核心原理：延遲加載
-
實作思路
- 1.将圖檔真實資源放入一個自定義屬性中
- 自定義屬性作用：存儲圖檔路徑，此時圖檔不會加載
- 2.監聽頁面滾動條事件
- 3.判斷圖檔是否進入頁面可視區域
- 4.取出圖檔的自定義屬性，指派給圖檔的src屬性（此時真正加載圖檔資源）
網頁性能優化02-懶加載工作原理懶加載工作原理
- 1.将圖檔真實資源放入一個自定義屬性中
- 示例代碼如下：
<!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>
<!-- 假設上面的内容高度1000px -->
<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.監聽頁面滾動條事件
window.onscroll = function(e){
console.log(document.scrollTop + document.clientHeight);
//2.如果圖檔進入可視區域（假如400px）,則取出自定義屬性，指派給src屬性（真正加載）
//ul是否進入可視區域 ： 滾動條距離 + 頁面可視區域高度 > 盒子高度
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>