0

私が作ったいくつかの簡単な画像スライダーがあります。小さな画像のリストがあり、そのうちの1つがクリックされるたびに、ターゲットの大きな画像のソースをクリックされたものに置き換えます(+srcサーバーから大きな画像を取得するための操作)。

今、私は小さな画像をクリックして大きな画像をフェードアウトし、新しい画像がロードされたときにそれをフェードインしたい.

このコードで試しました：

ul.find('img').click(function() {
    $('#big_image')
        .fadeOut()
        .attr('src', this.src.replace('/small/', '/big/')) // Some other src
        .load(function() {
            $(this).fadeIn();
        });
});

これに関する問題は、ブラウザが画像をキャッシュすると、onclick 画像がすぐに読み込まれ、フェードインとフェードアウトすることです。これは少し面倒に見えます。

これ：

ul.find('img').click(function() {
    $('#big_image')
        .load(function() {
            $(this).fadeIn();
        })
        .attr('src', this.src.replace('/small/', '/big/'))
        .load(function() {
            $(this).fadeIn();
        });
});

まったく色あせません。

何か案が？

4

2 に答える 2

1

で固定

ul.find('img').click(function() {
    $('#big_image').fadeOut(500, function() {
        $(this).attr('src', this.src.replace('/small/', '/big/'))
            .load(function() {
                $(this).fadeIn();
            });
    });
});
于 2009-12-15T20:12:29.843 に答える
0

私がこのようなことをしたとき、私はこのjQueryプラグインを使用しました：

http://flesler.blogspot.com/2008/01/jquerypreload.html

大きな画像を自動的に読み込んで、小さな画像に置き換えることができます。ライブラリは自動的にフェードするのではなく、切り替えるだけですが、大きな画像の読み込みが完了したときにイベントをトリガーするためのハンドルを提供します。

于 2009-12-15T20:10:36.417 に答える