jquery - 阻止用户在页面加载时执行任何操作

Question

我有一个选项卡式 Web 应用程序，并且我还在页面转换之前创建了图像缓存，因此当用户转到一个页面时，我确保在转换到该页面之前下载所有图像。

当我单击包含许多图像的选项卡时，我会显示一个微调器并开始在后台下载图像，然后在完成后我将显示该页面。

但是我想在执行此操作时冻结任何用户输入或点击。那么冻结和解冻整个页面的最佳方法是什么？

score 16 · Accepted Answer

或者简单地添加一个分割，它会阻塞 body，并且在加载 body 时会淡出。

<div id="div">
    <h1>Please Wait..</h1>
</div>

jQuery 将是：

$(document).ready(function(){
    $("#div").fadeOut()
  });

这是工作示例。该页面将被阻止，直到图像完全加载。

score 2 · Accepted Answer

此 JQuery 代码可以禁用页面上的元素：

$("body").find("*").attr("disabled", "disabled");
$("body").find("a").click(function (e) { e.preventDefault(); });

这段 JQuery 代码将再次启用元素：

$("body").find("*").removeAttr("disabled");
$("body").find("a").unbind("click");

score 0 · Accepted Answer

用顶级透明/半透明覆盖覆盖界面应该阻止其下方元素的事件。

但是，您将通过这样做将 UI 控制权从用户手中夺走。

score 0 · Accepted Answer

我用：

$(window).bind('load', function() {
    // code here
});

在页面未完全加载之前，不会触发此事件。因此，您可以在那里调用解锁页面元素的函数。

享受：）

4 回答 4