Heim > Fragen und Antworten > Hauptteil
下面是个人代码,思路是监视文档滚轮事件,若img出现在视口了就设置该img的src属性,现在问题是我的这段代码,鼠标一滚轮所有图片都显示了,我自己看了下自己写的代码,疑惑的是在循环判断Img的距离时,前几张img显示后为什么没有撑开使下面的img的rect.top不再为0?
<p class="img_box" id="imgBox">
<img src="" src="img01.png" alt="">
<img src="" src="img02.png" alt="">
<img src="" src="img03.png" alt="">
<img src="" src="img04.png" alt="">
<img src="" src="img05.png" alt="">
<img src="" src="img06.png" alt="">
<img src="" src="img07.png" alt="">
<img src="" src="img08.png" alt="">
<img src="" src="img09.png" alt="">
<img src="" src="img10.png" alt="">
</p>
<script>
var W = window.innerWidth || document.documentElement.clientWidth;
var H = window.innerHeight || document.documentElement.clientHeight;
var imgList = document.getElementsByTagName('img');
document.onmousewheel = function(){
for(var i=0;i<imgList.length;i++){
var rect = imgList[i].getBoundingClientRect();
if(rect.top>=0 && rect.left>=0 && rect.top<= H && rect.left<=W){
loadItem(imgList[i]);// **这里每执行一次,接下来的img的rect.top的距离为什么还是0?**
}
console.log(rect.top);
}
}
function loadItem(ele){
var src = ele.getAttribute("src");
ele.setAttribute("src",src);
}
</script>
ringa_lee2017-04-10 16:47:50
这样,你的初始p里面因为没有图片,所以p的top是0,所以它里面的所有img元素的top也是0
然后你的onmousewheel方法有个问题,就是你在一开始就获取了imgList,而在触发事件时就使用的这个imgList,但是你要知道,imgList里面的元素状态是一开始的状态,所以对里面的元素来说,它们的top值没有方法去改变,所以还是原来的状态,即使加载了图片。个人认为你应该把获取imgList这个东西放到方法中去,每次加载一个图片后再刷新list
伊谢尔伦2017-04-10 16:47:50
设置src到图片真正load完成是需要时间,异步的~
也就是所你设置好src属性的时刻并不意味的图片已经加载到客户端了~
你可loadItem把图片宽度高度也一并设置了看看效果