JS图片懒加载
2018-08-28 本文已影响3人
肆意木
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
img {
display: block;
}
</style>
<body>
<img src="default.jpg" data-src="https://pic.qqtn.com/up/2018-5/15258307613400205.jpg" alt="">
<img src="default.jpg" data-src="http://www.ppt123.net/beijing/UploadFiles_8374/201805/20180509170349834.jpg" alt="">
<img src="default.jpg" data-src="https://www.fruitzj.com/uploads/allimg/180608/4-1P60Q60643.jpg" alt="">
<img src="default.jpg" data-src="http://www.51pptmoban.com/d/file/2016/03/06/981a113c8b7de63a474f7b29e19a27b9.jpg"
alt="">
<img src="default.jpg" data-src="http://www.51pptmoban.com/d/file/2014/11/02/9b2fa22718d658777e690eae67c3bd93.jpg"
alt="">
</body>
<script>
var imgs = document.getElementsByTagName("img").length;
var img = document.getElementsByTagName("img");
var count = 0;
lazyload();
window.onscroll = lazyload;
function lazyload() {
var imgHeight = document.documentElement.clientWidth;
var imgTop = document.documentElement.scrollTop || document.body.scrollTop;
for (var i = 0; i < imgs; i++) {
if (img[i].offsetTop < imgHeight + imgTop) {
if (img[i].getAttribute("src") == "default.jpg") {
img[i].src = img[i].getAttribute("data-src");
}
count = i + 1;
}
}
}
</script>
</html>
