<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0px;
margin: 0px;
}
html,
body {
width: 100%;
min-height: 100%;
}
img {
border: none;
vertical-align: middle;
height: 400px;
width: 400px;
}
@keyframes fadeIn {
0% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<img src="" data-src="111.jpg" alt=""><br/>
<img src="" data-src="111.jpg" alt=""><br/>
<img src="" data-src="111.jpg" alt=""><br/>
<img src="" data-src="111.jpg" alt=""><br/>
<img src="" data-src="111.jpg" alt=""><br/>
<img src="" data-src="111.jpg" alt=""><br/>
<img src="" data-src="111.jpg" alt=""><br/>
<img src="" data-src="111.jpg" alt=""><br/>
<img src="" data-src="111.jpg" alt=""><br/>
<img src="" data-src="111.jpg" alt=""><br/>
<img src="" data-src="111.jpg" alt=""><br/>
<img src="" data-src="111.jpg" alt=""><br/>
<img src="" data-src="111.jpg" alt=""><br/>
<img src="" data-src="111.jpg" alt=""><br/>
</body>
</html>
<script>
var imgs = []
imgs = document.getElementsByTagName('img')
for(var i=0;i<imgs.length;i++){
if (checkShow(imgs[i]) && !isLoaded(imgs[i])) {
loadImg(imgs[i]);//加载当前img
}
}
window.addEventListener('scroll', function () {//滚动的触发事件
for(var i=0;i<imgs.length;i++){
if (checkShow(imgs[i]) && !isLoaded(imgs[i])) {
loadImg(imgs[i]);//加载当前img
}
}
})
function checkShow($img) { // 传入img对象
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
var windowHeight = document.documentElement.clientHeight; //可见区域高度
var offsetTop = $img.offsetTop //目标标签img相对于document顶部的位置
var imgHeight = $img.height; //获取图片高度,在向上滚动会用到,比如网页一打开就定位到了中间或底部,就会向上滚动
if (offsetTop < (scrollTop + windowHeight) && (offsetTop+imgHeight) > scrollTop) { //在2个临界状态之间的就为出现在视野中的,只加载出现在视野中的图片
return true;
}
return false;
}
function isLoaded($img) {
return $img.getAttribute('data-imgurl') === $img.getAttribute('src'); //如果data-imgurl和src相等那么就是已经加载过了
}
function loadImg($img) {
$img.src = $img.getAttribute('data-imgurl') // 把自定义属性中存放的真实的src地址赋给src属性
$img.style.cssText = "animation:fadeIn 1s" //类似fadeIn效果
}
</script>