js 单个图片的延迟加载

Posted 2020-07-19

单个图片的延迟加载

总结：   1.Image对象，代表的是嵌入的图片 -->img标签每出现一次，Image对象就会被创建一次。所以创建一个实例用来接收img的src。

　　　　2.onload就是页面或者图片加载完成之后触发。

　　　　3.用完这个实例之后，一般要销毁的！要不然加载一次创建一个！造成负担。

 

开始写代码：

<div id="banner">
    <img src="" trueImg="1.png"/>
</div>

 

 var banner = document.getElementById("banner");
    var imgFir = banner.getElementsByTagName("img")[0];

    window.setInterval(function(){
        var oImg = new Image;
        oImg.src = imgFir.getAttribute("trueImg");
        oImg.onload = function(){
            imgFir.src = this.src;
            imgFir.style.display = "block";
            oImg = null;
        }
    },500);