为什么图像加载不起作用

Question

我意识到这是我的新手 javascript 程序员提出的一个常见问题。 Console.log(img) 和 console.log("before onload") 正确执行，但我从未看到 Image Loaded 消息。

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

对于任何和我犯同样错误的人 - 确保 onload 都是小写而不是驼峰式：onLoad。

这个好：

img.onload = function () { };

这很糟糕：

img.onLoad = function () { };

Answer 2

试试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 3

嵌套函数调用时的“img.onload”函数不准确

你需要在 "$().ready (function(){ }" 或 "window.onload = function() { }" 中显式调用 "img.onload" 函数

例如

$().ready (function(){ 

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

Answer 4

我不确定你的代码的确切问题是什么，但这里有一些我写了一段时间的代码来处理同样的问题（小提琴：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 5

我遇到了类似的问题。我注意到如果页面正常重新加载，我的图像.onload没有被调用，如果我使用f12 +右键单击重新加载按钮重新加载页面并选择Empty Cache and Hard Reload，则调用.onload。