0

写真でいっぱいのページがあり、それぞれが。でdivにラップされていclass="photo_wrap"ます。ユーザーは一定数の写真を見ることができます。もっと見たい場合は、「もっと写真を見る」ボタンをクリックします。写真が読み込まれるのを待っている間、「プログレスバー」のgifをで表示しid="spinner"ます。組積造のプラグインと写真の読み込みに関するいくつかの問題のため、すべてimgのが完全に読み込まれた後、組積造を「再読み込み」に設定しました。問題は、これによって「プログレスバー」のgifがアニメーション化されなくなることです。$('div.photo_wrap img').load(...写真だけを書くと効果があると思いましたclass="photo_wrap"が、それでも「プログレスバー」のgifがアニメーション化されません。なんで？

$(document).ready(function(){

    $("#spinner").show();

    $.ajax({
        type: "POST",
        url: 'my_script.php',
        dataType: 'html',
        success: function(data){
            var $container = $('#myPhotos');
            $container.append(data);

            $('div.photo_wrap img').load(function(){    
                $container.masonry( 'reload' );
            });

            $container.masonry( 'reload' );

            $("#spinner").hide();
        }
    });

    return false;
});
4

1 に答える 1

0

$('div.photo_wrap img').load(function(){...});画像が読み込まれるたびに起動します。少なくとも、onloadイベントが発生する前にハンドラーが配置されていた場合はそうなります。

ハンドラーを配置する前に画像の読み込みを抑制するために、次のように画像を提供できます。

<img src="", data-src="myImages/....jpg">

したがって、javascriptはURLをからdata-srcにコピーできsrc、onloadハンドラーがアタッチされる前にイメージのロードイベントが発生する可能性はありません。

function loadMoreImages() {
    $("#spinner").show();
    $.ajax({
        type: "POST",
        url: 'my_script.php',
        dataType: 'html',
        success: function(data){
            var $container = $('#myPhotos');
            $container.append(data);
            var promises = $('div.photo_wrap img').map(function() {
                var d = $.Deferred();
                $(this).attr("src", $(this).data('src'));//copy img url across
                $(this).load(d.resolve).error(d.resolve);//attach load and error handlers
                return d.promise();
            }).get();
            $.when.apply(this, promises).done(function() {
                $container.masonry('reload');
                $("#spinner").hide();
            });
        }
    });
}

部分的にテスト済み

すべての画像が読み込まれたときに応答するために、promiseの配列（imgごとに1つ）をに渡すことがわかりjQuery.whenます。

これで問題が解決するかどうかはわかりませんが、正しい方向に進んでいます。

于 2012-08-06T01:47:40.490 に答える