0

我想要

  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
4

2 回答 2

0

您可以尝试在图像加载时开始淡入吗？我认为淡入是在图像完全加载和显示之前开始的。

$("#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>');  
  }); 
});
于 2012-07-13T18:20:43.400 回答
0

您的图像不会立即被替换，因为浏览器需要一些时间来加载图像数据，然后才会替换旧的。等到图像将被加载，然后执行您的fadein.

于 2012-07-13T18:23:18.580 回答