javascript - 延迟加载的这段代码哪里有问题呢？

Question

下面是个人代码，思路是监视文档滚轮事件，若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>

Answer 1

这样，你的初始p里面因为没有图片，所以p的top是0，所以它里面的所有img元素的top也是0
然后你的onmousewheel方法有个问题，就是你在一开始就获取了imgList，而在触发事件时就使用的这个imgList，但是你要知道，imgList里面的元素状态是一开始的状态，所以对里面的元素来说，它们的top值没有方法去改变，所以还是原来的状态，即使加载了图片。个人认为你应该把获取imgList这个东西放到方法中去，每次加载一个图片后再刷新list

Answer 2

设置src到图片真正load完成是需要时间，异步的~
也就是所你设置好src属性的时刻并不意味的图片已经加载到客户端了~
你可loadItem把图片宽度高度也一并设置了看看效果

Answer 3

你试试给img一个默认图片试试
<img src="/img/default.png" src="img10.png" alt="">