高分求教WEB高手 实现一个类似微博的微博的滚动加载
发布网友
发布时间：2022-05-01 18:32
共2个回答
热心网友
时间：2022-06-21 07:14
<html>
<head>
<title>lazyImage2.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css" mce_href="styles.css">-->
</head>
<body style="text-align:center" mce_style="text-align:center">
<p> </p><p> </p><p> </p><p> </p><p> </p>
<div style="height:1290px;width:800px;border:1px;background:gray;"></div>
<div style="height:150px;width:800px;border:1px;background:green;"></div>
<img class="lazy" src="images/sprite.gif" mce_src="images/sprite.gif" alt="images/lazyloadImg.jpg" />
<mce:script type="text/javascript"><!--
var temp = -1;//用来判断是否是向下滚动（向上滚动就不需要判断延迟加载图片了）
window.onscroll = function() {
var imgElements = document.getElementsByTagName("img");
var lazyImgArr = new Array();
var j = 0;
for(var i=0; i<imgElements.length; i++) {
if(imgElements[i].className == "lazy"){
lazyImgArr[j++] = imgElements[i];
}
}
var scrollHeight = document.body.scrollTop;//滚动的高度
var bodyHeight = document.body.offsetHeight;//body（页面）可见区域的总高度
if(temp < scrollHeight) {//为true表示是向下滚动，否则是向上滚动，不需要执行动作。
for(var k=0; k<lazyImgArr.length; k++) {
var imgTop = lazyImgArr[k].offsetTop;//1305（图片纵坐标）
if((imgTop - scrollHeight) <= bodyHeight) {
lazyImgArr[k].src = lazyImgArr[k].alt;
lazyImgArr[k].className = "notlazy"
}
}
temp = scrollHeight;
}
};
// --></mce:script>
</body>
</html>
热心网友
时间：2022-06-21 07:15
