<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
img{
width:100%;
margin-bottom: 30px;
min-height:400px;
background-color: #ddd;
height:300px;
}
</style>
</head>
<body>
<img lazyload="1.jpg" src="">
<img lazyload="2.jpg" src="">
<img lazyload="3.jpg" src="">
<img lazyload="4.jpg" src="">
<img lazyload="5.jpg" src="">
<img lazyload="6.jpg" src="">
<img lazyload="7.jpg" src="">
<img lazyload="8.jpg" src="">
<img lazyload="9.jpg" src="">
<img lazyload="10.jpg" src="">
<img lazyload="11.jpg" src="">
<img lazyload="1.jpg" src="">
<img lazyload="2.jpg" src="">
<img lazyload="3.jpg" src="">
<img lazyload="4.jpg" src="">
<img lazyload="5.jpg" src="">
<img lazyload="6.jpg" src="">
<img lazyload="7.jpg" src="">
<img lazyload="8.jpg" src="">
<img lazyload="9.jpg" src="">
<img lazyload="10.jpg" src="">
<img lazyload="11.jpg" src="">
<script type="text/javascript" src="jquery-3.2.0.min.js"></script>
<script type="text/javascript">
//js版本
var imgNum=document.getElementsByTagName('img').length;
var imgObj=document.getElementsByTagName('img');
var l=0;
window.οnscrοll=function(){
var seeHeight=document.documentElement.clientHeight;
var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
for(var i=l;i<imgNum;i++){
if(imgObj[i].offsetTop<seeHeight+scrollTop){
console.log(imgObj[i].getAttribute('src'));
console.log(imgObj[i].src);
if(imgObj[i].getAttribute("src")==""){
imgObj[i].src=imgObj[i].getAttribute("lazyload");
}
}
if(imgObj[i].offsetTop>seeHeight+scrollTop){
l=i;
break;
}
}
}
//jquery版本
var l=0
//js方法翻譯版
$(window).bind("scroll", function(event){
for(var i=l;i<$("img").length;i++){
if($("img").eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())){
if($("img").eq(i).attr("src") == ""){
var lazyloadsrc=$('img').eq(i).attr("lazyload");
$("img").eq(i).attr("src",lazyloadsrc);
}
}
if($("img").eq(i).offset().top > parseInt($(window).height()) + parseInt($(window).scrollTop())){
l=i;
break;
}
}
});
</script>
</body>
</html>
刷新回頂部就是用這個事件，可以這麼寫。window.onbeforeunload = function(){$(window).scrollTop(0);}