Question

我意识到这是我新手javascript程序员提出的一个常见问题。 Console.log（img）和console.log（“on 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。

这个好处：

In [149]: df[['label']].join(df.groupby('label')
                               .transform(lambda x: x.fillna(x.median())).astype(int))
Out[149]:
   label  r1  r2  r3
0      0  12  89  58
1      1  34  52  24
2      1  32   4  18
3      0   7  89   2
4      1  22  19  12

这很糟糕：

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

此问题类似于CORS相关的安全问题。还有其他几个与从跨域加载图像的问题有关，导致类似的问题，如publicly hosted image with a liberal CORS policy?

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

当嵌套函数中的调用不能正常工作时，

“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");
 }
}

为什么图像上传不起作用

5 个答案: