5

我意识到这是我的新手 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];
   }
}
4

5 回答 5

9

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

这个好：

img.onload = function () { };

这不好：

img.onLoad = function () { };
于 2017-07-26T20:41:36.477 回答
5

尝试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);
    }

}

（未经测试，喝醉了）

于 2013-05-21T20:39:51.553 回答
1

调用嵌套函数时的“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");
 }
}
于 2014-12-26T18:22:43.460 回答
0

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

于 2013-05-21T20:47:03.717 回答
0

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

于 2021-12-13T20:25:49.647 回答