为什么图像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() { };