使用微调器加载 jQuery 整个 HTML 页面
Posted
技术标签:
【中文标题】使用微调器加载 jQuery 整个 HTML 页面【英文标题】：jQuery whole HTML page load with spinner 【发布时间】：2012-05-24 17:44:19 【问题描述】：我正在尝试做一些简单的事情——制作一个 jQuery 脚本，该脚本将等待显示整个页面，包括所有 DIV、文本和图像。在页面加载时，我想显示一个旋转的 GIF 图像，而不是显示页面的一部分，当整个页面加载时，我们可以在浏览器窗口中淡化页面的内容。
有很多脚本可以通过 ajax 请求加载到容器 DIV 中——但这是不同的。这将在加载 html 页面时显示旋转的 GIF。任何帮助表示赞赏
这种类型的脚本只适用于 ajax 请求
$('#loadingDiv')
.hide() // hide it initially
.ajaxStart(function()
$(this).show();
)
.ajaxStop(function()
$(this).hide();
);
【问题讨论】：
【参考方案1】：$(document).ready(...) 在 DOM 加载后立即触发。这还为时过早。你应该使用$(window).on('load', ...):
$(window).on('load', function()
$('#cover').fadeOut(1000);
)
CSS：
#cover
background: url("to/your/ajaxloader.gif") no-repeat scroll center center #FFF;
position: absolute;
height: 100%;
width: 100%;
HTML：
<div id="cover"></div>
<!-- rest of the page... -->
看看这个 jsFiddle：http://jsfiddle.net/gK9wH/9/
【讨论】：
是的，文档就绪触发得太快了，一些元素可能在浏览器窗口中渲染的中间，它会显示这个......所以我们如何先显示微调器，然后隐藏它-- 如果我们正在等待窗口加载？ 是的。我看到这行得通！但我没有看到微调器。也许微调器被 JSFiddle 窗口滚动隐藏了？ 这是因为图像不再可用了！这有效：jsfiddle.net/gK9wH/9（别忘了投票或接受 ;-) 很棒的 jsFiddle。帮了大忙！ 位置：固定；如果您不希望页面的其余部分在滚动时显示。【参考方案2】：我会用叠加层覆盖整个页面，然后在页面加载后移除叠加层。如果您愿意，您可以调整它以显示 loading.gif。 这是一个例子：
HTML
<body>
<div id="container">
<h2>Header</h2>
<p>Page content goes here.</p>
<br />
<button id="remove_overlay">Remove Overlay</button>
</div>
</body>
CSS
#containerpadding:20px;
h2 margin-bottom: 10px; font-size: 24px; font-weight: bold;
#overlay
position: absolute;
top: 0;
left: 0;
width: 100%;
height:2305px !important; /*change to YOUR page height*/
background-color: #000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
z-index: 998;
#remove_overlayposition:relative; z-index:1000;
jQuery:
$(document).ready(function ()
// Set a variable that is set to the div containing the overlay (created on page load)
var page_overlay = jQuery('<div id="overlay"> </div>');
// Function to Add the overlay to the page
function showOverlay()
page_overlay.appendTo(document.body);
// Function to Remove the overlay from the page
function hideOverlay()
page_overlay.remove();
// Show the overlay.
$(showOverlay);
);
);
$(document).ready(function ()
$(hideOverlay);
);
您需要对此进行调整，以便在请求页面时立即加载叠加层（调整 $(showOverlay); 调用，使其在文档准备好之前触发。
这是一个简单的工作小提琴，带有一个按钮来删除覆盖。你应该可以从那里去 :) http://jsfiddle.net/3quN5/
【讨论】：
【参考方案3】：我认为最好的方法是有一个“封面” div，它会在加载时覆盖整个页面。它将是不透明的，并且会包含您的 GIF。
页面加载后，以下内容将隐藏 div：
$(document).ready(function()
// Hide the 'cover' div
);
以下将使 div 成为页面的大小：
.div
height:100%;
width:100%;
overflow:hidden;
【讨论】：
【参考方案4】：首先你是指body标签之间的所有内容吗？做旋转礼物的最好方法是添加一个类，将 gif 定义为不重复和居中。当页面准备好显示时删除类。
$('body').addClass('loading')
$('body').removeClass('loading')
这始终是最好的技术，因为如果您提交一些内容，然后尝试通过 DOM 添加添加 gif，一些浏览器不会这样做，因为页面已提交。
【讨论】：
那么，我们将如何做到这一点呢？我的意思是……我们怎么知道什么时候所有字节都被加载了，是时候移除加载类并淡入 Body 的主要部分了？以上是关于使用微调器加载 jQuery 整个 HTML 页面的主要内容，如果未能解决你的问题，请参考以下文章
使用 InAppBrowser 加载页面和微调器加载后无法输入输入字段