淡入有问题

Something goes wrong with fadeIn

本文关键字：有问题 淡入      更新时间：2023-09-26

你好，我想淡出图像，然后用一个新的图像做淡入，所以我写了一个简单的代码，但出了点问题，因为当 .photo img 淡出时，然后淡入淡出在同一张照片中，但之后，几秒钟它因为新的"src"而发生了变化，但即使浏览器没有加载新图像，旧图像也不会显示， 因为 SRC 已更改，但它会显示，并且在一秒钟后，也许对新 SRC 进行了两次更改。有人可以告诉我出了什么问题吗？

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

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

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

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");
    });
});

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

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
}
相关文章：