您的位置：首页 > Web前端

前端性能优化之 —— 图片延迟加载（借鉴修改）

2017-02-03 00:00 260 查看

图片延迟加载这个是借鉴了别人写的小demo，原demo并不能多图并排，修改后可以多图同一横排显示。

感谢原文作者DiamondFsd 原文地址：https://my.oschina.net/u/2328699/blog/830990

代码：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.lazy-img {
height: 400px;
background: #eee;
overflow:auto;
}

img {
width: 200px;
height: 300px;
border: 2px solid #eee;
background: #ccc;
}
</style>
</head>

<body>
<div class="lazy-img" id="lazy-img" style="width: 1000px;overflow-x:hidden;">
<img src="" data-src="img/index.jpg" />
<img src="" data-src="img/index.jpg" />
<img src="" data-src="img/index.jpg" />
<img src="" data-src="img/index.jpg" />
<img src="" data-src="img/index.jpg" />
<img src="" data-src="img/index.jpg" />
<img src="" data-src="img/index.jpg" />
<img src="" data-src="img/index.jpg" />
<img src="" data-src="img/index.jpg" />
<img src="" data-src="img/index.jpg" />
<img src="" data-src="img/index.jpg" />
<img src="" data-src="img/index.jpg" />
</div>
<script>
var imgContainer = document.getElementById('lazy-img')
var imgs = imgContainer.querySelectorAll('[data-src]')
var imgHeightDomMapping = {}
for(var i=0;i<imgs.length;i++){
imgHeightDomMapping[i]=imgs[i]
}
imgContainer.addEventListener('scroll', function() {
showImage()
})

function showImage() {
var currentHeight = imgContainer.clientHeight + imgContainer.scrollTop // 滚动区域的高度
for(var i=0;i<Object.keys(imgHeightDomMapping).length;i++){
if(currentHeight >imgHeightDomMapping[i].offsetTop+ imgHeightDomMapping[i].clientHeight / 1.5) { // 判断当前图片是否已经显示
//将图片dom的 `src` 改为 `data-src` 的内容
console.info(imgHeightDomMapping[i])
imgHeightDomMapping[i].src = imgHeightDomMapping[i].getAttribute('data-src')
}
}
}

showImage() // 主动调用一次 加载首页的
</script>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 图片延迟加载

相关文章推荐

新的分享

章节导航