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

Question

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

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

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

Answer 1

您可以使用名为jQuery Block UI

的预定义jQuery UI

或者只是添加一个阻挡身体的分裂，并在身体加载时淡出。

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

jQuery将是：

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

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

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控制。

Answer 4

我用：

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

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

享受：）