<!--
* @Description: 希望KEEP REAL
* @Version: 版本更新中...
* @Autor: AKAYangYi
* @Date: 2020-08-13 01:04:13
* @LastEditors: YangYi
* @LastEditTime: 2020-08-13 01:41:16
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 3000px;
}
img {
vertical-align: middle;
}
</style>
</head>
<body>
<div class="imgbox">
</div>
</body>
</html>
<script>
var arr = [
"https://img.zcool.cn/community/015aa45f323cdda801215aa038e135.png@1380w",
"https://img.zcool.cn/community/011e6e5f334da1a80120a8214fddbe.jpg@1380w",
"https://img.zcool.cn/community/010c115f334deda80120a821b00ad1.jpg@1380w",
"https://img.zcool.cn/community/01be425f302bfea801215aa011d7e3.jpg@1380w",
"https://img.zcool.cn/community/011d4b5f323ccea80120a8219b7a37.png@1380w",
"https://img.zcool.cn/community/015aa45f323cdda801215aa038e135.png@1380w",
"https://img.zcool.cn/community/011e6e5f334da1a80120a8214fddbe.jpg@1380w",
"https://img.zcool.cn/community/010c115f334deda80120a821b00ad1.jpg@1380w",
"https://img.zcool.cn/community/01be425f302bfea801215aa011d7e3.jpg@1380w",
"https://img.zcool.cn/community/011d4b5f323ccea80120a8219b7a37.png@1380w",
];
function _(ele) {
ele = document.querySelectorAll(ele);
if (ele.length === 1) {
return ele[0];
} else if (ele.length > 1) {
return [].slice.call(ele);
} else {
return null;
}
}
function render() {
//创建该有的图片容器
var box = document.createDocumentFragment();
for (var i = 0; i < arr.length; i++) {
var img = document.createElement("img");
img.setAttribute("data-src", arr[i]);
box.appendChild(img);
}
_(".imgbox").appendChild(box);
}
render();
window.onload = function () {
var flag = true;
//一张图片的高度
var imgonce = 350;
var w_height = window.innerHeight;
//当页面没有滚动的时候 初始渲染 在页面可是范围的图片
if (flag) {
var max_count = Math.floor(w_height / imgonce);
renderimg(max_count);
}
window.addEventListener("scroll", function () {
var scrolltop = document.body.scrollTop || document.documentElement.scrollTop;
if (!scrolltop) return false;
flag = false;
max_count = Math.ceil((w_height + scrolltop) / imgonce);
setTimeout(function () {
renderimg(max_count)
}, 2000);
})
}
//渲染图片 只有出现在当前的页面才会显示
function renderimg(count) {
if (count > arr.length) return false;
for (var i = 0; i < count; i++) {
_(".imgbox > img")[i].src = _(".imgbox > img")[i].getAttribute("data-src")
}
}
</script>