Question

我有一个带有一些本地内容/链接的网页，还有两个使用jQuery.load（）从长时间运行的外部API加载的div。

我希望用户能够点击远离网页而无需等待加载事件完成。我相信我的代码是单线程的并且是串行运行的，阻止了UI，因此用户无法在页面上执行任何操作，直到返回load（）为止。

在我的下面的代码中，您可以单击锚标记，但它实际上不会离开页面，直到load（）事件都串行完成。（对于load（）事件并行运行会很好，我认为这与第一个问题直接相关。）

如何使用jQuery加载div，同时仍然允许用户在load（）事件完成之前在呈现的页面中单击？

    $(document).ready(function () {
        $("#div_test1").load("long1.aspx")
        $("#div_test2").load("long2.aspx")
    });

网页：

<div>
    <p>Some content.</p>

    <p><a href="http://www.stackoverflow.com">click before load() completes</a></p>
    <p><a href="?">page reload</a></p>

    <div id="div_test1" style="border: 1px solid red; width: 100px;"></div>
    <div id="div_test2" style="border: 1px solid blue; width: 100px;"></div>
</div>

long1.aspx和long2.aspx只是使用VB.NET注入了一些时间延迟：

Private Sub long1_Load(sender As Object, e As EventArgs) Handles Me.Load
    Response.CacheControl = "No-Cache"
    For counter = 1 To 10
        System.Threading.Thread.Sleep(400)
        Response.Write(String.Format("{0}<br />", counter.ToString))
    Next
End Sub

修改我在上面添加了第二个href，只需重新加载页面即可。我现在注意到外部链接（如www.stackoverflow.com）未被阻止，并且会在用户单击时立即导航，而不会等待load（）。但是阻止了同一网站的任何链接。您可以单击该链接，但浏览器不会去那里，直到load（）完成。

Answer 1

您可以在文档准备好或加载页面之前将事件绑定到元素。它会在文档加载代码的那一刻起作用，这样你就可以将它放在标题中，其余的放在页脚或其下的其他地方。

绑定事件：

$('.element').on('click',function(){
     //some code here
});

如何在等待jQuery AJAX加载事件时保持对浏览器的控制？

1 个答案: