Question

This question already has answers here:

Possible Duplicate:
jQuery or JavaScript: Determine when image finished loading

The problem is known, but I can t find any simple solution:

var img = new Image();

img.onLoad = function() {
  console.log("load");         // this event doesn t fire
};

img.src = "img/domino/21.png";

console.log(img.complete);     // false

setTimeout(function() {
  console.log(img.complete);   // sometimes true, sometimes false
}, 10);

我期待举行这次富集活动,但我找不到任何东西。你们是否帮助?

Answer 1

活动手工艺品的适当拼写是.onload,而不是.on Load。

var img = new Image();

img.onload = function() {
  console.log("load");         // works every time
};

img.src = "img/domino/21.png";

Java稿是敏感的,因此,MUST使用所有物体特性的适当案例。

除<代码>外的替代品:onload/code>

img.addEventListener("load", function(e) {...});

或(在旧版本的IEE中):

img.attachEvent("onload", function(e) {...});

如果你只使用一个活动手提器,而你则使用一个已经为你提取活动处理器的跨平台图书馆,那么,使用<代码><<<<<>>>>>。

此外,在此为增加活动操作员提供一个简单的交叉浏览器:

// add event cross browser
function addEvent(elem, event, fn) {
    if (elem.addEventListener) {
        elem.addEventListener(event, fn, false);
    } else {
        elem.attachEvent("on" + event, function() {
            // set the this pointer same as addEventListener when fn is called
            return(fn.call(elem, window.event));   
        });
    }
}

Answer 2

var img = new Image();
img.onload = function() {
    console.log("load");
};
img.src = "img/domino/21.png";
console.log(img.complete);     // false
setTimeout(function() {
  console.log(img.complete);   // sometimes true, sometimes false
}, 10);

In Chrome,Firefox and Safari

var img = new Image();
img.addEventListener( load ,function() {
    console.log("load");
});
img.src = "img/domino/21.png";
console.log(img.complete);     // false
setTimeout(function() {
  console.log(img.complete);   // sometimes true, sometimes false
}, 10);

或者在IE或歌剧中

var img = new Image();
img.attachEvent( onload ,function() {
    console.log("load");
});
img.src = "img/domino/21.png";
console.log(img.complete);     // false
setTimeout(function() {
  console.log(img.complete);   // sometimes true, sometimes false
}, 10);

Answer 3

您是否相信您在img/domino/21.png上的形象? 以下法典在Firebug s console上为我做了工作。

var img = new Image();

var onload = function() {
    console.log( load );
}

img.onload = onload;

img.src = "http://img.gawkerassets.com/img/17m7otdiw6n8fjpg/original.jpg?" + (new Date()).getMilliseconds();

Answer 4

如果你能够使用 j子,可以简单:

$( img ).load(foo).error(foo);

Or with vanilla javascript:

img.onload = img.onerror = foo;

Answer 5

var img = new Image();

//blah blah...

img.addEventListener("load",function() {
    console.log("Loaded!");
});

友情链接