html img加载延后问题解决方案

我们可以用脚本创建一个新的 Image 对象，但这种方法的主要缺点是如果不希望脚本因为等待图片装置而暂停，还得需要突破预装载。

我们可以通过下面简单的方法来创建图片：

        var img = new  Image();  

        img.src = 'myImage.png';   

当脚本执行后，图片开始装载。若调用 drawImage 时，图片没装载完，脚本会等待直至装载完毕。如果不希望这样，可以使用 onload 事件（解决方案）：

       var img = new  Image(); 

       img.onload = function(){ 

         // execute drawImage statements here 

       }

       img.src = 'myImage.png'; 

如果你只用到一张图片的话，这已经够了。但一旦需要不止一张图片，那就需要更加复杂的处理方法，但图片预装载策略超出本教程的范围，感兴趣的话可以参考JavaScript Image Preloader。

参考：jQuery中ready与load事件的区别 http://www.uw3c.com/jsviews/js15.html

转载于:https://www.cnblogs.com/SherryIsMe/p/3487312.html