图片迟加载
图片迟加载即当滚动条向下滚动时，只有在视口内的图片才加载，其余图片则不加载。
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相关
-
每一个你不满意的现在，都有一个你没有努力的曾经。