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

【问题标题】：Prevent user to perform any actions while page is loading阻止用户在页面加载时执行任何操作
【发布时间】：2012-08-21 10:19:32
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

您可以使用名为 jQuery Block UI 的预定义 jQuery UI

或者简单地添加一个分割，将阻塞主体并在加载主体时淡出。

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

jQuery 将是：

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

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

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

但是，这样做会使用户失去对 UI 的控制权。

【讨论】：

【解决方案4】：

我用：

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

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

享受:)

【讨论】：