我重来,复制过来有问题
<html>
<head>
<style>
img{
display:block;
width:300px;
height:300px;
}
</style>
</head>
<body>
<img src="default.jpg" data-src="
" alt="">
<img src="default.jpg" data-src="
" alt="">
<img src="default.jpg" data-src="
" alt="">
<img src="default.jpg" data-src="
" alt="">
<img src="default.jpg" data-src="
" alt="">
<img src="default.jpg" data-src="
" alt="">
<img src="default.jpg" data-src="
" alt="">
<img src="default.jpg" data-src="
" alt="">
<img src="default.jpg" data-src="
" alt="">
<img src="default.jpg" data-src="
" alt="">
<img src="default.jpg" data-src="
" alt="">
<input class="btn" type="button" value="删除">
<script>
var imgs = document.getElementsByTagName("img");
var lenght = document.getElementsByTagName("img").length;
var n = 0;
lazyload();
window.onscroll = lazyload;
function lazyload(){
var seeheight = document.documentElement.clientHeight
var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
for (var i = n;i<lenght;i++){
var url = imgs[i].getAttribute("data-src")
var ourl = imgs[i].src
if(imgs[i].offsetTop < seeheight + scrolltop ){
if (imgs[i].getAttribute("src")==="default.jpg"){
if (imgs[i].getAttribute("src")==="default.jpg"){
imgs[i].src = imgs[i].getAttribute("data-src")
}
n = i+1;
}
}
}
</script>
</body>