Ищу альтернативу образу onLoad

Возможный дубликат:
jQuery или JavaScript : определить, когда изображение закончило загрузку

Проблема известна, но я не могу найти простого решения:

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);

Я искал реализацию события onComplete, но ничего не нашел. Не могли бы вы помочь?


person ciembor    schedule 11.05.2012    source источник
comment
Попробуйте этот вопрос   -  person Pavel Strakhov    schedule 11.05.2012
comment
onload, а не onLoad; JavaScript чувствителен к регистру, даже если HTML нет.   -  person Phrogz    schedule 11.05.2012
comment
@Riateche - мое изображение не в DOM, это объект изображения.   -  person ciembor    schedule 11.05.2012
comment
@Phrogz - Черт возьми :D:D:D. Я потерял час из-за одного письма.   -  person ciembor    schedule 11.05.2012


Ответы (4)


Правильное написание свойства обработчика событий — строчные буквы .onload, а не .onLoad.

var img = new Image();

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

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

Javascript чувствителен к регистру, поэтому вы ДОЛЖНЫ использовать правильный регистр для всех свойств объекта.


Альтернативы, кроме .onload, должны использовать:

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

или (в более старых версиях IE):

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

Если вы используете только один обработчик событий и не используете кросс-платформенную библиотеку, которая уже абстрагирует обработчики событий за вас, то использование .onload является самым простым.

И вот простой кросс-браузерный способ добавления обработчиков событий:

// 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));   
        });
    }
}
person jfriend00    schedule 11.05.2012
comment
Примечание: вопрос Looking for an alternative to the image onLoad, а не why onLoad is not working. - person Derek 朕會功夫; 11.05.2012
comment
Да, но я искал альтернативу, потому что она не работала. Конечно, спасибо за все ответы, но эти решают мою проблему :). - person ciembor; 11.05.2012
comment
@ciembor - Хорошо, я добавил пару альтернатив. - person jfriend00; 11.05.2012
comment
Также сегодня я обнаружил, что webkit требуется img.src = '' перед назначением нового src, если он использовался ранее. - person quux; 24.05.2014
comment
ваша загрузка не срабатывает, вероятно, так как изображение находится в кеше браузера. - person Holger Thiebosch; 20.12.2019
comment
@HolgerThiebosch - загрузка по-прежнему срабатывает, когда изображение поступает из кеша браузера. - person jfriend00; 20.12.2019

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);

В Chrome, Firefox и 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 или Opera

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);
person Danilo Valente    schedule 11.05.2012

Вы уверены, что ваше изображение в img/domino/21.png существует? Следующий код работает для меня в консоли Firebug.

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();
person Michael Robinson    schedule 11.05.2012

Если вы можете использовать jQuery, это может быть просто:

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

Или с ванильным javascript:

img.onload = img.onerror = foo;
person gdoron is supporting Monica    schedule 11.05.2012
comment
Почему минус? я что-то пропустил? - person gdoron is supporting Monica; 11.05.2012
comment
вы разозлили фанатов прототипа / mootools, когда упомянули jQuery - person Michael Robinson; 11.05.2012
comment
Я предполагаю, что onLoad против onload (но я этого не делал). - person Phrogz; 11.05.2012
comment
@Дерек. Тогда не используйте его. Я разве написал, что это единственный способ? - person gdoron is supporting Monica; 11.05.2012
comment
Я не возражал против вашего ответа. Я не тот, кто минусовал тебя. - person Derek 朕會功夫; 11.05.2012