js延迟加载图片为什么无法显示图片

答案:1 悬赏:10 手机版

解决时间 2021-02-12 04:16

提问者网友：记得曾经
2021-02-11 06:55

代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
#imgBox{ width:1000px; margin:20px auto;}
dl,dt,dd{ list-style:none;}
dl{ width:240px; height:170px; margin-right:5px; float:right}
</style>
</head>

<body>
<p>111111111111111111111111111</p>
.........中间很多文本内容然后出现了滚动条省略了，知道有滚动条就好
<p>sssssssssssssssssssssssssss</p>
<div id="imgBox">
<dl>
<dt><img xsrc="001.jpg" src="bg.jpg" class="loadImg"></dt>
<dd></dd>
</dl>
<dl>
<dt><img xsrc="002.jpg" src="bg.jpg" class="loadImg"></dt>
<dd></dd>
</dl>

</div>
</body>
</html>
<script src="jquery-1.5.1.min.js"></script>
<script>
window.onload=function(){
var imgArr=document.getElementsByTagName("img");
function getOffsetTop(obj){
var top=obj.offsetTop;
var parent=obj.offsetParent;
while(parent!=null){
top+= parent.offsetTop;
parent=parent.offsetParent;
}
return top;

}
//获取可视区的高度
//var clientHeight=document.body.clientHeight;
var top=document.body.clientHeight||document.documentElement.clientHeight;
//滚动条的高度
var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
window.onscroll=function(){
for(var i=0;i<imgArr.length;i++){
var _top=getOffsetTop(imgArr[i]);
if(_top<=top&&_top<=top+scrollTop){
imgArr[i].setAttribute("src",imgArr[i].getAttribute('xsrc'))
}
}
}
}
}

</script>
不是不给分，真的没分了，对不起了

最佳答案

五星知识达人网友：鸽屿
2021-02-11 08:15

首先你的看看你的代码有没有执行到 imgArr[i].setAttribute("src",imgArr[i].getAttribute('xsrc'))；<br>用f12调试脚本，或者alert()下；并查看图片的src有没有改变！如果改变了证明执行了，在看下imgArr[i].getAttribute('xsrc')有没有获取到src值<br>获取对象位置的代码我不知道你的有没有问题，下面是我做延时加载时用到的代码：<br> var getPosition= function (el) {<br> _x = 0, _y = 0;<br> while (el.offsetParent !== null) {<br> _x += el.offsetLeft;<br> _y += el.offsetTop;<br> el = el.offsetParent;<br> }<br> return { x: _x, y: _y };<br> }<br>如果还不可以你可以把代码给我帮你看看

我要举报

如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

点此我要举报以上问答信息