2

画像を表す一連のJSONオブジェクトをループするスクリプトがあります。ループは画像を読み込み、読み込まれると、ウェブサイト/アプリケーションの要素に追加します。

画像はJSONで正しい順序になっていますが、最初に追加されるため、最も速く読み込まれる画像に応じて異なる順序で表示されます。画像が読み込まれる順序が何であれ、常に正しい順序（ループが示す順序）であることを確認したいと思います。

最終的には、画像が読み込まれる前にラッピングアンカーのスタイルにアクセスして、読み込みアイコンも表示できるようにしたいと考えています。

これが私が話しているスクリプトの一部です：

$.each(project.images, function (index, image){

var image_src = '<?= IMAGE_PATH ?>library/preview/'+ image.file_name;
var image_markup = $('<img class="new-image" />').attr('src', image_src)
                                                     .load(function(){

    if (this.complete) 
    { 
        var anchor_markup = $('<a href="javascript:void(0)" class="image-anchor" data-image-index="'+ index +'" id="image-index-'+ index +'">');
        $(anchor_markup).append(image_markup);
        globals.markup.image_slider.append(anchor_markup);
        $('.new-image').fadeIn(200).removeClass("new-image");
    }
});
});

この例は、 http：//www.staging.codebycoady.com/workでも見ることができます。

4

2 に答える 2

5

正しい順序でそれらを追加したい場合は、それらがロードされるのを待たずにそれらを追加し、それらを非表示にしてから、onloadコールバックでそれらを表示に切り替えます。

于 2012-06-05T13:44:41.623 に答える
1

画像を正しい順序で表示したい場合は、画像の読み込みイベントをリッスンする必要があります。画像が読み込まれると、（配列/オブジェクトで）画像にマークが付けられます。次に、最初からロード済みとしてマークされているすべての画像を表示します（つまり、1,2,3がロードされ、4がロードされていない場合、5がロードされたばかりであっても、表示ブロックを1,2,3に設定します）。

于 2012-06-05T13:45:52.300 に答える