3

我相信你们都看过这个使用这个图像替换的演示：

$("#largeImg").attr({ src: largePath, alt: largeAlt });

http://www.webdesignerwall.com/demo/jquery/img-replacement.html

因此，假设我想更改屏幕上的 4 个图像来模拟我正在更改整个“页面”，但避免使用 AJAX/PHP 或任何图像预加载器。我的代码现在遇到的问题：

<script>
$(document).ready(function(){
    $(".navlink").click(function(){
        var theirname = $(this).attr("name");
        var imagepath = "images/img_"+theirname+".jpg";
        var headerpath ="images/header_"+theirname+".png";
        var textpath = "images/about_"+theirname+".jpg";
        //var lightpath = "images/smallimg_"+theirname+".jpg";
        $("#primeheader").attr({ src: headerpath});
        $("#primetext").attr({ src: textpath}); 
        $("#primephoto").attr({ src: imagepath});
    });
});
</script>

是当你调用“淡入”、“动画不透明度”或类似的东西时，使用 .attr({src:whatever}) 切换图像源总是首先使其可见，即使在使 .css 可见性之后也是如此无/不可见。

我已经尝试过延迟， setTimeout 等（我尝试尽可能多地研究以避免重复的帖子）

希望这是有道理的，对不起，如果它太罗嗦/不清楚

反馈表示赞赏！谢谢！

4

1 回答 1

1

如果你用一个容器包装所有元素，然后在图像转换过程中淡出/淡入容器，会发生什么情况。

$('#primeContainer').fadeOut('fast', function() {
    $('#primeheader').attr({ src: headerpath });
    $('#primetext').attr({ src: textpath });
    $('#primephoto').attr({ src: imagepath });
    $(this).fadeIn('fast');
});
于 2009-08-17T17:18:42.737 回答