Question

你好我想fadeOut图片，然后用新的fadeIn做，所以我写了一个简单的代码，但是出了点问题，因为当.photo img fadesOut，然后在这张相同的照片中淡出，但之后，几秒钟它的变化是因为新的＆＃34; src＆＃34;，但即使浏览器没有加载新的图像，旧的也不会显示，因为src已更改，但它显示，并且第二，可能是新的一个改变。有人能告诉我什么是错的吗？

var dimage = $next.children("img").attr("rel");
$(".photo img").fadeOut("slow", function () {
    $(".photo img").attr("src", dimage);
    $(".photo img").fadeIn("slow");
});

Answer 1

这可能是因为在更改src之后必须加载图像考虑将图像放在标记中，然后将css属性设置为display：none。这样，图像将在脚本运行之前在浏览器中预加载，并在脚本运行时可用。

Answer 2

你没有给新图像足够的时间加载。

function loadImage (src) {
    return $.Deferred(function(def){
        var img = new Image();
        img.onload = function(){
            def.resolve(src);
        }
        img.src = src;
    }).promise();
}
var dimage = $next.children("img").attr("rel");
var imageLoadedDef = loadImage(dimage);
$(".photo img").fadeOut("slow", function () {
    def.done(function(src){
        $(".photo img").attr("src", src);
        $(".photo img").fadeIn("slow");
    });
});

Answer 3

突出显示的问题是当你调用它们时图像还没有准备好显示，因此解决方案是在开始幻灯片放映之前预先加载它们，创建一个带有图像路径数组的函数

function preLoad(){
  var imgs = {'test1.jpg', 'test2.jpg', 'test3.jpg'};
  var img = document.createElement('img');
  for(var i = 0; i < imgs.leght; i++){
    img.src = imgs[i]; //all images gets preloaded at this stage
  }

  startSlider(); //here you will do your code
}

fadeIn出了点问题

3 个答案: