ajax - jQuery .load() 等待内容加载完成

Question

如何防止 jQuery $('body').load('something.php'); 更改 any DOM 直到所有内容都来自 something .php(包括图片、js)完全 加载

-假设一些实际内容是:

Hello world

而something.php的内容是:

image that loads for 10 seconds
20 js plugins

触发 .load() 函数后，什么都不会发生，直到图像和 js 文件完全加载，THEN 立即更改内容。

一些预加载器可能会出现，但它不是问题的主题。

[编辑]---------------------------------------- ----------------------------

我的解决方案是跨浏览器不透明度为 0 的 css 代码(css 总是在构建 dom 之前加载)。

.transparent{
    -moz-opacity: 0.00;
    opacity: 0.00;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=0);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    filter:alpha(opacity=0);
}

它通常可以防止内容的闪烁，但并非总是如此。现在可以以某种方式检测到内容是由 jQuery ajax 加载并应用一些显示超时等。但实际上问题仍然悬而未决。

现在为这个问题做一个更简单的例子:

单击触发 .load('something.php') 函数的链接后，如何在 $('body').load('something.php') 延迟 3000 毫秒后开始更改 DOM？ (浏览器应立即开始下载，但 DOM 更改必须稍后启动)

Answer 1

使用.get相反，并在成功回调中分配内容:

$.get('something.php', function(result) {
    $('body').html(result);
});