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

问题描述

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

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?

推荐答案

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

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将是:

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

此处 是有效的示例.页面将被阻止，直到图像完全加载.

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

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