jQuery - 更改图像源动态闪烁原始图像然后更改它

Question

编辑：我在这里寻找一个全jquery解决方案，我无法编辑html / css，最初没有显示图像。

我尝试过这种方式，但是在将原始图像更改为新的源图像之前，它仍会闪烁原始图像。

我意识到简单的答案是：

$('.logo').attr('src', newlogosrc);

但是，我也尝试了一些类似的东西：

$('.logo').hide();
$('.logo').attr('src', newlogosrc);
$(this).delay(500).show();

这只会延迟整个过程（等待半秒钟，然后闪烁原始图像，然后将其更改为新图像）。

有什么想法吗？

Answer 1

有两种方法可以阻止初始显示图像：

1. 在图片代码本身上添加内联style="display: none;"。
2. 添加默认情况下处于活动状态的CSS规则.logo {display: none;}。

当然，如果更实际，您也可以隐藏包含div而不是图片本身，如果您愿意，可以使用visibility: hidden代替display: none。

Javascript在DOM加载后运行，所以除非图像隐藏在HTML级别（在JS运行之前），否则它可能最初显示。

默认情况下，当这两个CSS规则中的一个处于活动状态时，图像最初不会显示，您可以使用javascript相应地设置.src属性，然后使用javascript显示图像。

另外，假设图像已经隐藏了上面两个选项中的一个，正确的JS加载新图像然后显示它是这样的：

$('.logo').load(function() {
    $(this).show();
}).attr("src", newlogosrc);

这会在新图像成功加载时显示。