0 
<ul id="ulBack">
   <li><img data-src="coffee/01.jpg" class="place"></li>
   <li><img data-src="coffee/02.jpg" class="place"></li>
   <li><img data-src="coffee/03.jpg" class="place"></li>   
</ul>



 $('#btnNext').click(function () {
        $('#slide').hide();
        if (n < xlen) {n+=1;}
        else {n=0};
        change();
        border();
    });

function change(){
    var goImg = $('#ulBack img' + ':eq(' + n +')').attr('data-src');
    $('#slide').attr('src', goImg);
};

border()関数 の終わりに私は持っています：

$('#slide').show();

したがって、最初にスライドを非表示にしてから、他のすべてのことを行い、最後にスライドを表示します。

しかし、次のボタンをクリックした後、プログラムが何かを待って、おそらく残りのコードを実行し、最後にスライドをすばやく非表示にして表示することは明らかです。これは意図したものではありません。

ここで見ることができます

4

3 に答える 3

2

あなたはこれを次のようにします：

function change(){
    var goImg = $('#ulBack img' + ':eq(' + n +')').attr('data-src');
    $('#slide').one('load', function() {
        $(this).show();
    }).attr('src', goImg).each(function() {
        if(this.complete) $(this).load();
    });
}

function border() {
    if([0,1,2,3,4,10,33,37].indexOf(n) != -1){
        $('#slide').css('border', 'none');
    } else {
        $('#slide').css('border', 'medium ridge #6c9');
    }
}
于 2013-07-22T16:31:00.080 に答える
2

私はそれを得たと思います: あなたの治療の最も長い部分は、私が思うに新しい画像を取得するための要求であり、そのために jQuery Ajax クエリを使用しますよね?

あなたの Ajax クエリは非同期だと思うので、新しい画像が読み込まれる前に、古い画像で show() が呼び出されます。これにより、写真が決して隠されていないという感覚が得られます。これを解決するには、ajax リクエストを同期化します。

$.ajax({
  ...,
  async: false
})
于 2013-07-22T16:23:02.793 に答える