html异步加载图片,javascript-img异步加载图片

在开发中,我们经常有异步加载图片的请求,然后在图片加载成功后做一些操作,一般我们通过onload方法来实现.网上有两种写法,大家可以先看一下(注:logo.jpg是张本地图片):

例子1:

var img = new Image();

img.src = "logo.jpg";

img.onload = function () {

alert("image is loaded");

};

document.body.appendChild(img);

例子2:

var img = new Image();

img.onload = function () {

alert("image is loaded");

};

img.src = "logo.jpg";

document.body.appendChild(img);

发现什么了没有?上面两个例子最大的差别就在于onload和src赋值的先后顺序.那么onload和src赋值的先后顺序会在实际中产生什么差别呢?

产生这个问题的原因很简单,就是因为logo.jpg是本地图片,导致浏览器加载起来非常快,几乎在给img赋值src的时候,图片就已经加载完成,同时触发了onload事件,代码中为onload赋值的语句就相当于在onload事件发生后,这时候已经晚了.

将src写到了onload的前面,会导致onload来不及赋值就被执行了,所以正确的写法应该是第2个例子.既在给图片分配地址前,先绑定好它的onload事件,这样就不用担心错过时机的问题了.

正确的例子：

var img = new Image();

// 如果文档装入完成后加载用window load

//window.addEventListener("load" , function(){

// document.body.appendChild(img);

//} , false);// 如果图片加载完毕用 img load

img.addEventListener('load', function(){

document.body.appendChild(img);

} , false);img.src = 'test.png';