Question

我试图了解jQuery load（）的工作原理。

所以我在index.html和external.html（包含彩色的<body>）中写了一个空的<div>，并包含了google的1.7.2 jquery.min.js。

如果我写

$(document).ready(function(){
    $("body").load("external.html");
});

彩色<div>正确显示。但是，如果我向脚本添加警报，

$(document).ready(function(){
    $("body").load("external.html");
    alert("Loaded");
});

警报会显示，但div不会出现。

导致这种情况的原因是什么？

Answer 1

您应该使用load的load回调（因为load是异步的）来确保加载操作完成。

$("body").load("external.html", function(){
   alert("Loaded"); //<-- This ensures load operation is complete whether success of failure
});

使用你的代码，它将启动加载，然后执行警报（将阻止ui），一旦它被解除，你将看到内容被加载。

$(document).ready(function(){
    $("body").load("external.html"); //<-- Starts the async operation
    alert("Loaded"); //<-- Just alerts and blocks the ui and once this is done and load operation is complete you will see the new contents getting loaded.
});

您看到该警报会禁用加载，因为alert阻止了ui线程，直到它被解除并且没有脚本可以同时运行。因此，只有在您解除警报后，才会完成加载操作（提供ajax调用获取内容所需的时间）。

Answer 2

因为，您希望在加载external.html后显示一个警告框，您应该使用$.load函数的回调函数，该函数在事件结束时被触发，如下所示：

$("body").load("external.html", function(){
   alert("Loaded");
});

以上内容将确保仅在加载external.html时显示警报。虽然您的当前代码会在load语句启动后立即显示警报，但这会取消load的效果。

参考：http://api.jquery.com/load/

alert（）禁用load（）方法？

2 个答案: