jquery - jQueryで新しいsrcを設定した後、古い画像を簡単に見る

Question

したい

1. 画像をフェードアウトする
2. 代替画像をプリロードする
3. 画像ソースを変更して新しい画像を表示する
4. (新しい) イメージのフェードイン

何らかの理由で、画像がフェードインするときに、古い画像が表示されてから新しい画像に置き換えられる非常に短い瞬間があります。これは画像操作間のタイミングの競合ではないと思います...他に何がこのちらつきを引き起こすのでしょうか?

// old image: about.jpg
// new image: contact.jpg


$('#content').fadeTo(1500, 0.01, function(){
    var container = $(this);

    // gather image information
    var src = img.parent().attr('href');
    imgData = { 'alt': img.attr('alt'), 'src': src, 'cap': '' };

    // change background image & caption (after image has been cached)
    var imgSrc = sanitizeBackgroundImage( imgData );
    $.get( imgSrc, function(data) {

        // set background image src to preloaded image
        $("#content>img").attr({"src": imgData.src});
        $("#content>img").attr({"alt": imgData.alt});

        // update caption text
        $('#bottom-caption').html('<span>' + imgData.cap + '</span>');

        // fade image container back in
        console.log( 'before fadeIn: ' + $("#content>img").attr("src") );
        container.fadeTo(750, 1);                   
    });
});

コンソールは正しく読み取ります

before fadeIn: /images/large/contact.jpg

Answer 1

ブラウザが画像データをロードするのに時間がかかるため、画像はすぐには置き換えられず、その後で古い画像が置き換えられます。イメージがロードされるまで待ってから、fadein.

Answer 2

画像読み込み時にフェードインを開始してみてはいかがでしょうか? 画像が完全に読み込まれて表示される前に、フェードインが開始されると思います。

$("#content>img").load(function() { $('#content').fadeTo(750, 1); });

$('#content').fadeTo(1500, 0.01, function(){ 
  var container = $(this); 

  // gather image information 
  var src = img.parent().attr('href'); 
  imgData = { 'alt': img.attr('alt'), 'src': src, 'cap': '' }; 

  // change background image & caption (after image has been cached) 
  var imgSrc = sanitizeBackgroundImage( imgData ); 
  $.get( imgSrc, function(data) { 

    // set background image src to preloaded image 
    $("#content>img").attr({"src": imgData.src}); 
    $("#content>img").attr({"alt": imgData.alt}); 

    // update caption text 
    $('#bottom-caption').html('<span>' + imgData.cap + '</span>');  
  }); 
});