Question

动画完成后我加载了一个AJAX请求。但是，我想加载ajax，hide（）我已经加载它，然后在动画完成后简单地show（）它。我的想法是，我不必担心用户正在等待加载图像，并且我可以在等待动画完成的所有地方复制它。甚至只是文字。

我可以简单地将它放在一个div中，显示为display：none;，并将其隐藏起来，但令我困扰的是它在页面上仍然在技术上“存在”。有没有办法将内容加载到用户根本无法看到的地方？

解决。确实，我不想在DOM中使用它，并且希望有一些CSS3 / HTML5某些东西或其他可以“保存”元素。：P同样，我知道其他人有很好的方法可以做到这一点，所以我需要最好的。我想我明白了。谢谢，大家。

Answer 1

您可以在屏幕上加载内容（例如position: absolute; left: -500px;），但这与将其加载到您想要的位置并将其设置为display: none没有什么不同。另外，你必须在显示之前移动它。

我认为你的第二段中的第一个建议是你应该做的：将它加载到一个样式为display: none的div中，然后只需重置display属性或在动画结束时淡化元素。

Answer 2

你完全正确。您必须将内容加载到页面上的容器中，以便浏览器知道它需要开始处理它。这样做没有“错误”，所以不要让它打扰你：）

var container = $('#myContainer');
container.hide();
container.html(ajaxResult);
container.fadeIn();

应该这样做......

我相信你甚至可以这样做：

$('#myContainer').hide().html(ajaxResult).fadeIn();

Answer 3

创建一个css类，如下所示：

.hiddenelement
{
    position:absolute !important;
    left:0% !important;
    top:0% !important;
    width:0% !important;
    height:0% !important;
}

隐藏元素时使用.addClass('hiddenelement')，并在显示元素时使用.removeClass('hiddenelement')。

当然，如果您的内联样式标记为!important，则无法使用。

注意：我相信如果没有定位，这可能会有效。

Answer 4

听起来你正试图解决一个不需要解决的问题。用户不会在乎某个地方的“那里”，因为无论如何你很快就会显示它，你不需要“模糊”它。也就是说，如果您使用.ajax()代替.load()，您将完全控制返回的数据;您不需要将它添加到DOM中。一旦进入DOM，您可以使用.detach()将其删除而不会在以后再次需要时将其删除。

Answer 5

不确定我是否理解正确，但您可以执行以下操作：

start_animation();
$.get('url', function(response) { stop_animation_and_show_content(response); });

function stop_animation_and_show_content(html) {
    // ...
}

在实际显示之前加载AJAX内容

5 个答案: