Ищете альтернативу для OnLoad изображения

Question

Можно создать дубликат:
jQuery or JavaScript: Determine when image finished loading

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

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, но я ничего не могу найти. Вы поможете?

Answer 1

Правильное написание свойства обработчика события все в нижнем регистре .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)); 
     }); 
    } 
} 

Answer 2

Вы уверены, что Ваше изображение на 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(); 

Answer 3

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

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

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

img.onload = img.onerror = foo; 

Answer 4

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

Answer 5

var img = new Image(); 

//blah blah... 

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