防止用户在页面加载时执行任何操作 [英] Prevent user to perform any actions while page is loading

问题描述

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

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

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

解决方案

您可以使用名为 jQuery 的预定义 jQuery UI阻止用户界面

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

<h1>请稍等..</h1>

jQuery 将是:

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

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

I have a tabbed web application, and I also created caching of the images before page transitions, so when the user goes to a page, I make sure all the images are downloaded before transitioning to that page.

When I click on a tab with many images, I display a spinner and starts downloading the images in the background then after it finishes I will display the page.

But I want to freeze any user inputs or taps while I'm doing this. So what is the best method to freeze and unfreeze the whole page?

解决方案

You can use a predefined jQuery UI called jQuery Block UI

Or simply add a division that will block the body and will fade out when the body is loaded.

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

jQuery will be:

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

Here is the working Example. The page will be blocked until the image is loaded completely.

这篇关于防止用户在页面加载时执行任何操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！