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

Question

我有一个带标签的web应用程序，我还在页面转换之前创建了图像缓存，所以当用户转到一个页面时，我要确保在转换到该页面之前下载了所有图像。

当我点击一个有许多图片的标签时，我会显示一个微调器，并开始在后台下载图片，然后在它完成后，我将显示页面。

但我希望在执行此操作时冻结所有用户输入或点击。那么冻结和解冻整个页面的最好方法是什么呢？

Answer 1

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

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

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

jQuery将为：

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

就是一个有效的例子。该页面将被阻止，直到图像完全加载。

Answer 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");

Answer 3

用顶层透明/半透明覆盖覆盖界面应该会阻止它下面的元素的事件。

但是，这样做可能会夺走用户对UI的控制权。