load和scroll 事件

如下  我们在网页中添加一个图片想要获取图片的width  获取不到？

    <script>

        // var img=new Image();
        // img.src="image/meinv.jpeg";
        // document.body.append(img);
        // console.log(img.width);     //获取不到宽度，刷新可以


        }
    </script>

为什么呢？因为当我们从本地调用图片的时候，它确实是显示了，但是还没有加载到缓存中（还没有真正的加载完毕）等我们在刷新的时候就可以获取到，这个

时候，已经加载缓存中去了。

    <script>
        var img=new Image();
        //为img对象添加一个加载事件判断，如果加载成功 我们在去获取它的宽度和加入到body中
        img.addEventListener("load",loadHanderl);
        img.src="image/meinv.jpeg";
        function loadHanderl(e){
            document.body.appendChild(img);
            console.log(this.width);
        }
    </script>

上面的语句就是给img添加了 加载load事件判断，这样就可以获取了

 

 

 

scroll  滚动条事件

    <style>
        div{
            height: 3000px;
        }
    </style>
    <!-- 为了显示滚动条，特意把div 加高 -->
    <div></div>
    <script>
        var div=document.querySelector("div");

        div.addEventListener("scroll",scrollHandler);

        function scrollHandler(e){
            console.log("aaa");
        }

        
    </script>