0

いくつかの画像があり、各画像の幅は 1400px です。すべての画像をロードした後、すべての画像の幅の合計を警告します。これが私のコードです。

var images = new Array("0.jpg", "1.jpg", "2.jpg");

for (var i = 0; i < images.length; i = i + 1) {
    $("#img_place").append("<img src='" + images[i] + "'>");
}


var loadedImgsCount = 0;
var imgTotalWidth = 0;

for (var i = 0; i < images.length; i = i + 1) {

    var currImg = new Image();
    currImg.src = images[i];
    currImg.onload = function() {
        loadedImgsCount = loadedImgsCount + 1;
        imgTotalWidth = imgTotalWidth + currImg.width;
    }

}


interv = setInterval(function() {
    if (images.length === loadedImgsCount) {
        alert(imgTotalWidth );
        clearInterval(interv);
    }
}, 500);

そしてHTMLで： 

 <div id="img_place">
 </div>

このコードは、たとえば 3 つの画像の場合です。問題は、クロムとサファリでは、このコードの結果が間違っている場合があります: 1400 の場合、2800 の場合がありますが、正しい場合もあります: 4200 です。どこでエラーが発生しましたか? 私のコードがサファリとクロムで正しく動作しないのはなぜですか?

4

2 に答える 2

3

逆を行います：

currImg.onload = function() {
    loadedImgsCount = loadedImgsCount + 1;
    imgTotalWidth = imgTotalWidth + currImg.width;
};
currImg.src = images[i];

問題は、コールバックを設定する前にイベントが生成されるonloadため、画像がキャッシュにあるときに関数が呼び出されない可能性があることです。loadonload

補足として、変数をインクリメントするためにこれを行うのが通常です。

loadedImgsCount++;
于 2012-08-28T15:15:12.283 に答える
0

width属性がハードコーディングされていない限り、画像の幅をチェックして、画像が読み込まれているかどうかを判断することをお勧めします。これにより、キャッシュの問題が回避されます。

var
images = ["0.jpg", "1.jpg", "2.jpg"],
images_place = $("#img_place"),  
images_loaded_interval = setInterval(function() {
    var total_width = 0;

    for (var i = 0; i < images.length; i++)
        if($('img',images_place).eq(i).width()*1 == 0) return;
        else total_width += $('img',images_place).eq(i).width()*1;

     alert(total_width);
     clearInterval(images_loaded_interval);

}, 500);

for (var i = 0; i < images.length; i++)
    images_place.append("<img src='" + images[i] + "'>");
于 2012-08-28T15:50:11.433 に答える