图片迟加载

weixin_34205826

于 2014-11-21 16:57:00 发布

阅读量66

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/u/1992917/blog/347263

本文介绍了一种图片懒加载的技术实现方案，通过JavaScript监听滚动条滚动事件来动态加载图片，提高网页加载速度和用户体验。

2019独角兽企业重金招聘Python工程师标准>>>

图片迟加载即当滚动条向下滚动时，只有在视口内的图片才加载，其他图片则不加载。

可以先把图片的url地址，保存在img的一个自定义属性中，然后给图片起个类名lazy，

当滚动条滚动时，把类名为lazy的图片push到一个数组中，然后循环遍历该数组，并判断图片是否在视口内，若在则将该图片的src设为自定义属性的值，并将类名设为nolazy。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

body, ul, li, img{

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>

转载于:https://my.oschina.net/u/1992917/blog/347263

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。