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

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 に答える