我们有一个 jQuery 进度条。有没有办法让进度条显示包含 PHP、CSS 和 JavaScript 等所有内容的 HTML 页面的加载?
就像预加载器一样,当页面被下载并完全呈现时,然后显示它。
如果没有进度条,我们可以用 jQuery 做一个预加载器吗?
我们有一个 jQuery 进度条。有没有办法让进度条显示包含 PHP、CSS 和 JavaScript 等所有内容的 HTML 页面的加载?
就像预加载器一样,当页面被下载并完全呈现时,然后显示它。
如果没有进度条,我们可以用 jQuery 做一个预加载器吗?
看我找到了什么
曾经..我试图创建这个,但它并不漂亮。我在页面上列出了我需要拥有的所有东西,并在加载进度条时一一增加。这是非常长的链条。这是我所做的一个示例。
$.getScript('js/lib/ui.js',function() { //Load the Jquery UI
//Call back function after the loading is complete
$("#progressinfo").html("Loading Widgets ..."); //Give the information
$.getScript('js/lib/widget.js',function() { // Load the jquery ui Widget
//Call back function after the loading is complete
$("#progressinfo").html("Loading Widgets: Progress Bar ..."); // Inform
$.getScript('js/lib/widgets/progressbar.js',function() { // Finally load the Jquery UI progressbar
//Call back function after the loading is complete
$("#progressbar").progressbar({ value: 5 }); // change the value of the UI informing the total amount of loadding completion
$("#progressinfo").html("Loading Widgets: some script ..."); //Inform of another script
$.getScript('somescript.js',function() { // Load another script
//Call back function after the loading is complete
$("#progressbar").progressbar({ value: 6 }); // change the value of the UI informing the total amount of loadding
});
});
});
});
最简单但仍然性感的方式:
隐藏所有内容,直到 DOM 准备好,除了位于页面中心的加载图标。然后当内容加载时,移除加载图标:
像这样的东西:
jQuery(function( $ ){
function preLoad() {
$("#content").addClass("hidden");
}
function loaded() {
$("#content").removeClass("hidden");
$('div#preLoader').css({display:'none'}).remove();
}
preLoad();
window.onload=loaded;
});
编辑:您需要一个ajax 加载器gif 作为 #preLoader 的背景图像