在添加到DOM之前，在AJAX响应中替换Div

我正在创建一个AJAX过渡到页面，其中我有一个英雄图像在两个页面上保持相同。点击一个链接后，我将图像居中，在后面添加新的HTML，并淡出中心图像。问题是，即使有一个缓存的图像（它是同一个文件），我看到图像突然出现在后面（从AJAX响应，附加到DOM后渲染），当淡出前面的图像。在添加到DOM之前，在AJAX响应中替换Div

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

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

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

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

欢呼

来源

2017-01-10 Merc

，使顶部图像停留在顶端您可以设置CSS z-index财产。并设置一个事件监听器，当下面的图像完成加载时，您可以淡出顶部图像。

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

来源

2017-01-10 23:08:45 David

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

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

然后我马上淡出。这给了我一个非常顺利的过渡，“等到加载”的缺点消失了。

反正（相较于我最初的问题，在这里我想将它添加到DOM之前更换Ajax响应中的形象，我现在把它添加到DOM，并立即对其进行操作。）

感谢。干杯

来源

2017-01-11 12:48:29 Merc

在添加到DOM之前，在AJAX响应中替换Div

回答

相关问题