Question

我正在创建一个AJAX过渡到我有英雄形象的页面，这两个页面都保持不变。点击链接后，我将图像居中，添加新的HTML并淡出中心图像。问题是，即使有一个缓存的图像（它是同一个文件），我看到图像突然出现在后面（来自AJAX响应，在追加到DOM之后呈现），当淡出前面的图像时。

即使通过在前面的图像的淡出添加一点延迟，后面的图像仍然没有准备好。（渲染可能需要更多时间）。

我的选择是等待Ajax图像div完全呈现（我不知道该怎么做），或者 - 这就是我想尝试的：在将图像添加到DOM之前替换（复制）AJAX响应中的图像。

这是否可行，是否有助于提高性能？在用AJAX响应替换内容后，我也会尝试立即替换div。

任何提示仍然非常受欢迎。

欢呼声

Answer 1

您可以设置css z-index属性，使顶部图像保持在顶部。并设置一个事件监听器，以便当下面的图像加载完毕后，您可以淡出顶部图像。

$('#bottom-img').on('load', function() {
   $('#top-img').fadeOut();
});

Answer 2

非常感谢你的回答。这就是我的意思。这将需要一些人等待图像完成加载，然后淡出顶部图像。但我得到了一个更好的解决方案：

因为这两个图像完全相同，所以我替换了后面的内容（ajax响应），并在我将图像顶部复制到ajax响应后立即（所以我用已经加载的图像替换图像）。

然后我立刻淡出。这给了我一个非常平滑的过渡，并且“等到装载”的缺点消失了。

（与我最初的问题相比，我想在将它添加到DOM之前替换ajax响应中的图像，我现在将它添加到DOM并立即对其进行操作。）

非常感谢。干杯