1、 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html, body, div {
margin: 0;
padding: 0;
}
img {
display: block;
margin-bottom: 50px;
height: 200px;
}
</style>
</head>
<body>
<img src="images/default.jpg" data-src="images/1.jpg">
<img src="images/default.jpg" data-src="images/2.jpg">
<img src="images/default.jpg" data-src="images/3.jpg">
<img src="images/default.jpg" data-src="images/4.jpg">
<img src="images/default.jpg" data-src="images/5.jpg">
<img src="images/default.jpg" data-src="images/6.jpg">
<img src="images/default.jpg" data-src="images/7.jpg">
<img src="images/default.jpg" data-src="images/8.jpg">
<img src="images/default.jpg" data-src="images/9.jpg">
<img src="images/default.jpg" data-src="images/10.jpg">
<img src="images/default.jpg" data-src="images/11.jpg">
<img src="images/default.jpg" data-src="images/12.jpg">
<img src="images/default.jpg" data-src="images/13.jpg">
<img src="images/default.jpg" data-src="images/14.jpg">
<img src="images/default.jpg" data-src="images/15.jpg">
<img src="images/default.jpg" data-src="images/16.jpg">
<img src="images/default.jpg" data-src="images/17.jpg">
<img src="images/default.jpg" data-src="images/18.jpg">
<img src="images/default.jpg" data-src="images/19.jpg">
<img src="images/default.jpg" data-src="images/20.jpg">
<img src="images/default.jpg" data-src="images/21.jpg">
<img src="images/default.jpg" data-src="images/22.jpg">
<img src="images/default.jpg" data-src="images/23.jpg">
<img src="images/default.jpg" data-src="images/24.jpg">
</body>
</html>
2、Js
// 获取元素文档坐标
function _getDocPos(ele) {
let x = 0,
y = 0;
while(ele != null) {
x += ele.offsetLeft
y += ele.offsetTop
ele = ele.offsetParent
}
return {x, y}
}
//节流函数
... 参考本博客下面的(throttle && debounce 文章)
//方法一:
function lazyload() {
var images = document.getElementsByTagName('img');
var len = images.length;
var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历
return function() {
var seeHeight = document.documentElement.clientHeight;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
for(var i = n; i < len; i++) {
if(_getDocPos(images[i]).y < seeHeight + scrollTop) { //方法二: 当图片的文档坐标小于（视口高度 + 滚动距离）
if(images[i].getAttribute('src') === 'images/default.jpg') {
images[i].src = images[i].getAttribute('data-src');
}
n = n + 1;
}
}
}
}
//方法二:
function lazyload() {
var images = document.getElementsByTagName('img');
var len = images.length;
var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历
return function() {
var seeHeight = document.documentElement.clientHeight;
for(var i = n; i < len; i++) {
if(images[i].getBoundingClientRect().top < seeHeight) { //方法二: 当图片的视口top出现在视口中
if(images[i].getAttribute('src') === 'images/default.jpg') {
images[i].src = images[i].getAttribute('data-src');
}
n = n + 1;
}
}
}
}
//测试
var loadImages = lazyload();
loadImages(); //初始化首页的页面图片
window.addEventListener('scroll', _throttle(loadImages, 1000), false);
3、结尾
本文参考--- 链接
网友评论