圖片遲加載
圖片遲加載即當滾動條向下滾動時，只有在視口內的圖片才加載，其餘圖片則不加載。
html
能夠先把圖片的url地址，保存在img的一個自定義屬性中，而後給圖片起個類名lazy，數組
當滾動條滾動時，把類名爲lazy的圖片push到一個數組中，而後循環遍歷該數組，並判斷圖片是否在視口內，若在則將該圖片的src設爲自定義屬性的值，並將類名設爲nolazy。url
<!DOCTYPE html>code
<html>htm
<head>圖片
<meta charset="UTF-8">ip
<title></title>get
<style>it
body, ul, li, img{io
margin: 0;
padding: 0;
}
#imgs{
overflow: hidden;
}
#imgs>li{
float: left;
list-style-type: none;
width: 30%;
margin-left: 5%;
height: 200px;
margin-top: 10px;
background-color: green;
text-align: center;
line-height: 200px;
}
#imgs li:nth-child(3n+1){
margin-left: 0;
}
#imgs li img{
width: 100px;
height: 100px;
vertical-align: middle;
}
</style>
</head>
<body>
<script>
window.onload = function(){
var imgArray = document.getElementsByTagName('img');
var lazyArray = []; //存放未加載的圖片
var viewHeight = window.screen.height;
var temp = -1; //保存滾動條上次離頂部的距離
var scrollT = 0; //保存滾動條離頂部的距離
function setImg(){
//將未加載的圖片push到數組lazyArray
for(var i=0; i<imgArray.length; i++){
if(imgArray[i].getAttribute('class') == "lazy"){
lazyArray.push(imgArray[i]);
}
}
//判斷未加載的圖片是否在視窗內
for(var i=0; i<lazyArray.length; i++){
//圖片離窗口頂部的高度
var imgT = lazyArray[i].offsetTop;
//圖片在視口內
if(imgT - scrollT < viewHeight){
lazyArray[i].className = 'notlazy';
lazyArray[i].setAttribute('src', lazyArray[i].getAttribute('data-src'));
}
}
}
setImg();
window.onscroll = function(){
//兼容性處理
scrollT = document.body.scrollTop || document.documentElement.scrollTop;
//判斷滾動條的滾動方向 向下才處理
if(temp < scrollT){
setImg();
}
temp = scrollT;
}
}
</script>
<ul id="imgs">
<li><img data-src="img/503.png" src="img/503.png" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
<li><img data-src="img/503.png" src="" alt=""/></li>
</ul>
</body>
</html>
- 1. JQuery.lazyload 圖片延遲加載
- 2. 延遲加載圖片
- 3. js圖片加載效果（延遲加載+瀑布流加載）
- 4. 圖片預加載、懶加載（延遲加載）
- 5. 圖片延遲加載策略（JavaScript）
- 6. jQuery Lazy Load 圖片延遲加載
- 7. Jquery.ScrollLoading圖片延遲加載技術
- 8. 圖片延遲加載方法
- 9. web 原生圖片延遲加載
- 10. 打開網頁，圖片延遲加載
- 更多相關文章...
- • Markdown 圖片 - Markdown 教程
- • ionic 加載動作 - ionic 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • NewSQL-TiDB相關
-
每一个你不满意的现在，都有一个你没有努力的曾经。