0

私は ajax スクリプトを利用したデザインを持っています。このスクリプトは、必要に応じて特定のページのコールバックを可能にします。デザインはサムネイルの単純なグリッドで、サムネイルをクリックすると、新しいページがスライドして大きな画像が表示されます。大きな画像用のある種のプリローダーを用意しようとしています。これは、画像が読み込まれると順次フェードインします。ajax とコールバックを初期化するスクリプトは次のようになります。

$(document).ready(function () {

$("#menu ul li").slidingPage({
        easing: 'easeInOutExpo',
        speed: 1100,
        slideScroll: 'horizontal',
        top: 0,
        navigation: {
                show: false,
                nestedPagesFlows: true
        },
        callbacks: {

                loader: function () {

                    $(function () {
                        $(".fadein").fadeIn("slow");
                    });

                    $(window).load(function () {
                        $(".preload").each(function (i) {
                            $(this).delay(400 * i).fadeIn();
                        });
                    });

                }
        }
    });
})

HTML:

<div class="fadein">
<div id="images">

<h1>Title</h1>

<div class="centre">    

<img alt="#" class="preload" src="...">
<img alt="#" class="preload" src="...">

</div>

</div>
</div>

fadein関数は期待どおりに機能しますが、機能しpreloadません。プリロードされた画像は CSS で非表示になりますが、表示されることはありません。コールバックは、ロード時ではなく、ページが更新された後にのみ呼び出されます。これが問題だと思います。正直なところ、私がやっていることはなぜか、あるいは互換性がないのかさえわかりません。これを修正する方法についてのアドバイスや、jQuery で画像を非表示にする別の方法についての提案はありますか? ありがとう

4

1 に答える 1

0

の代わりにjQuery の.load()APIを使用することでこれを解決しましたwindow.load。例：

$('#selector').load(function() {
  alert('Load was performed.');
});

それが最も効率的な方法かどうかはわかりませんが、欲望の効果が得られます。

于 2012-09-25T23:34:36.413 に答える