0

jQuery 画像プリロード スクリプトを 1 つの側面だけで適応させるのに問題があります。画像が画像配列の順序で読み込まれ/表示されることを確認する方法がわかりません。

現時点では、ページをリロードするたびに画像が異なる順序で表示されます。(画像の順序以外はすべて正常に動作します。)

誰でもこれを修正するのを手伝ってもらえますか?

関連するコード:

    (function($) {
        var imgList = [];
        $.extend({
            preload: function(imgArr, option) {
                var setting = $.extend({
                    init: function(loaded, total) {},
                    loaded: function(img, loaded, total, bild) {},
                    loaded_all: function(loaded, total) {}
                }, option);
                var total = imgArr.length;
                var loaded = 0;

                setting.init(0, total);
                for (var i = 0; i < total; i++) {
                    imgList[i] = ($("<img />")
                        .attr("src", imgArr[i])
                        .load(function() {
                            loaded++;
                            setting.loaded(this, loaded, total, this.src);
                            if(loaded == total) {
                                setting.loaded_all(loaded, total);
                            }
                        })
                    );
                }
           }
        });
    })(jQuery);

    $(document).ready(function() {
        $(function() {
            $.preload([
                "image1.jpg",
                "image2.jpg",
                "image3.jpg"
            ], {
                init: function(loaded, total) {
                    var z = 0;
                    while (z < total) {
                        z++;
                        $("section nav").append('<img id="e'+z+'" src="all/blank.png" alt=""/>');
                    }
                },
                loaded: function(img, loaded, total, bild) {
                    $("#e"+loaded).prop("src",bild);
                },
                loaded_all: function(loaded, total) {
                    //all done!
                }
            });
        });
    });

アップデート：

結局、ゼロから書いた、まったく別の、はるかに短いスクリプトで解決しました。配列には実際の画像が含まれ、前の画像が終了した後にのみ各画像をロードするため、画像コンテナにプレースホルダーとして（非常に小さい）ダミー画像を追加し始めます。

imgs = new Array("number1.png","number2.png","number3.png");

for (i=0; i<imgs.length; i++) {
  $("section nav").append('<img id="e'+i+'" src="blank.png" alt=""/>');
}

fin(0);

function fin (n) {
  $('#e'+n).attr('onload', 'fin('+n+')');
  $("#e"+n).attr("src", imgs[n]).load( function() {
    fin ((n+1));
  });
}
4

3 に答える 3

1

問題は、現在読み込まれている画像の数の位置に読み込まれた img を追加することです。つまり、画像は読み込まれた順に配置されます。

実際に注文したいのはvar i：

for (var i = 0; i < total; i++) {
    imgList[i] = ($("<img />")
        .attr("src", imgArr[i])
        .load(function() {
            loaded++;
            setting.loaded(this, i, total, this.src);  // i instead of loaded
            if(loaded == total) {
                setting.loaded_all(loaded, total);
            }
        })
    );
}

しかし、画像がロードされたときiと同じになるため、これは機能しません。そのため、すべての画像は position に移動します。あなたが望むものではありません！totaltotal

iしたがって、正しい値にアクセスするには、自己呼び出しの匿名関数でラップする必要があります。

for (var i = 0; i < total; i++) {

    // wrap in function to get access to the right i

    (function(img) {
        imgList[img] = ($("<img />")
            .attr("src", imgArr[img])
            .load(function() {
                loaded++;
                setting.loaded(this, img, total, this.src);  // img instead of i
                if(loaded == total) {
                    setting.loaded_all(loaded, total);
                }
            })
        );
    })(i);
}

for ループをこれに置き換えると、動作するはずです。

于 2012-06-05T17:02:25.803 に答える
0

loaded画像は非同期で読み込まれるため、コールバックが順番に呼び出されることはありません。ただし、loaded_all代わりに元の配列を渡すように変更する必要があります。そうすれば、ハンドラーは画像を順番に処理できます。

if(loaded == total) {
    setting.loaded_all(imgArray);
}
于 2012-06-05T17:00:31.520 に答える
0

Unless you delay the download of each image until the previous is done (which would be a bad idea), you can't guarantee in what order they will be downloaded.

The browser will typically download several images in parallell, to optimize throughput. Combine this with the unpredictable download speed and differing file sizes, and the files will be done in pretty much any order.

If it is the visual effect you want, you have to solve that separately.

于 2012-06-05T16:55:40.770 に答える