爲什麼圖像onload不起作用

Question

我意識到這是一個常見的問題，由新手javascript程序員問我。 Console.log（img）和console.log（「onload」之前）執行正確，但我從來沒有看到圖像加載消息。

AssetManager.loadImages = function(urls) { 
    var images = []; 
    var urlCount = urls.length; 
    for (var i=0; i<urlCount; i++) { 
     var img = new Image(); 
     images.push(img); 
    } 
    var urlsLoaded = 0; 
    for (var i=0; i<urlCount; i++) { 
     (function(img) { 
     console.log(img); 
     console.log("before onload"); 
     img.onload = function(e) { 
      console.log("Image Loaded!"); 
      urlsLoaded++; 
      if (urlsLoaded >= urlCount) { 
       AssetManager.callback(images); 
      } 
     } 
     })(images[i]);    
     images[i].src = urls[i]; 
    } 
} 

Answer 1

嘗試var img = document.createElement("img");

或

AssetManager.loadImages = function(urls) { 
    var images = new Array(); 
    var urlCount = urls.length; 
    var urlsLoaded = 0; 
    var leImg; 
    for (var i=0; i<urlCount; i++) { 
     leImg = document.createElement("img"); 
     leImg.onload = function(e){ 
      urlsLoaded++; 
      if (urlsLoaded >= urlCount) { 
       // AssetManager.callback(images); --> this is balls, still 
      } 
     } 
     leImg.src = urls[i]; 
     _images.push(leImg); 
    } 

} 

（未測試，醉）

Answer 2

我不知道確切的問題是你的代碼是什麼，但這裏的一些代碼我寫了一段時間回來處理相同的問題（小提琴：http://jsfiddle.net/LJRSL/）那裏有一些額外的東西，可能不需要:)

$.preloadImg = function (url, callback, to_len) { //to_length = image fetch timeout in ms 
    var img = new Image(), 
     $img = $(img), 
     st = new Date().getTime(), 
     to; 

    if (callback && $.isFunction(callback)) { 

     to = window.setTimeout(function() { 
      callback.call(this, url, true); 
     }, to_len || 5000); 

    } 


    $img 
     .on('load', function() { 
      to = window.clearTimeout(to); 

      if ($.isFunction(callback)) 
       callback.call(this, url, false); 
     }) 
     .attr('src', url) 
     ; 
    /*this is probably unnecessary*/ 
    if (img.complete) { 
     $img.off('load'); 
     if ($.isFunction(callback)) { 
      to = window.clearTimeout(to); 

      callback.call(this, url); 
     } 
    } 
}; 

$.preloadImg('https://www.google.com/images/srpr/logo4w.png', function(img) { $('#test').attr('src', img); alert('done'); }); 

和好措施裝載多個：

$.preloadImgs = function (urls, callback, to_len) { 
    var i = 0, c = 0; 
    for (; i < urls.length; i++) { 
     c++; 
     $.preloadImg(urls[i], function (url, timedout) { 
      if (--c === 0 && i >= urls.length - 1) 
       callback.call(this, urls); 
     }, to_len); 
    } 
}; 

你可以嘗試通過addEventListener結合您的活動，而不是onload =

Answer 3

「img.onload」功能時，在嵌套函數調用不起作用確切

您需要在「$（）。ready（function（）{}」或「window.onload = function（）{}」中顯式調用「img.onload」函數「

e.g

$().ready (function(){ 

var img = new Image(); 
img.src = 'image.png'; 
img.onload = function() 
{ 
    console.log("loaded"); 
} 
} 

Answer 4

這個問題類似於相關的安全問題CORS。還有其他幾個SO相關問題加載從跨域圖像，這造成類似的問題，因爲在publicly hosted image with a liberal CORS policy?

Answer 5

對於任何人誰犯同樣的錯誤是我 - 確保onload事件是所有小寫，而不是駱駝情況：的onLoad。

這好：

img.onload = function() { }; 

這不好：

img.onLoad = function() { };