[英]Website Content load, Progress bar
I have an issue in website loading progress bar. 我在网站加载进度栏中遇到问题。 I am using below script for progress bar but its not working perfect in Web server www.example.com, website is hosted live in webserver but the issue is when I open the site the progress bar starts after a while.
我使用下面的脚本显示进度条,但在Web服务器www.example.com中无法正常工作,网站托管在Web服务器中,但是问题是当我打开站点时,进度条会在一段时间后启动。
How can I start progress bar as I open a website? 打开网站时如何启动进度栏?
Thanks. 谢谢。
$(window).load(function(){
var width = 100,
perfData = window.performance.timing, // The PerformanceTiming interface represents timing-related performance information for the given page.
EstimatedTime = -(perfData.loadEventEnd - perfData.navigationStart),
time = parseInt((EstimatedTime/1000)%60)*100;
// Loadbar Animation
$(".loadbar").animate({
width: width + "%"
}, time);
// Loadbar Glow Animation
$(".glow").animate({
width: width + "%"
}, time);
// Percentage Increment Animation
var PercentageID = $("#precent"),
start = 0,
end = 100,
durataion = time;
animateValue(PercentageID, start, end, durataion);
function animateValue(id, start, end, duration) {
var range = end - start,
current = start,
increment = end > start? 1 : -1,
stepTime = Math.abs(Math.floor(duration / range)),
obj = $(id);
var timer = setInterval(function() {
current += increment;
$(obj).text(current + "%");
//obj.innerHTML = current;
if (current == end) {
clearInterval(timer);
}
}, stepTime);
}
// Fading Out Loadbar on Finised
setTimeout(function(){
$('.preloader-wrap').fadeOut(300);
}, time);
});
Try using $(document).ready(function(){
instead of $(window).load(function(){
尝试使用
$(document).ready(function(){
代替$(window).load(function(){
The
ready
event occurs after the HTML document has been loaded, while theonload
event occurs later, when all content (eg images) also has been loaded.ready
事件在HTML文档已加载之后发生,而onload
事件在稍后又加载了所有内容(例如图像)时发生。
The purpose of theready
event is that it should occur as early as possible after the document has loaded, so that code that adds functionality to the elements in the page doesn't have to wait for all content to load.ready
事件的目的是,它应该在文档加载后尽早发生,从而使向页面中的元素添加功能的代码不必等待所有内容加载。
Credits to Guffa for answering this question感谢Guffa回答了这个问题
So it's not waiting for the images, etc. are loaded. 因此,它不等待图像等加载。 Only for the HTML document, which is loaded pretty fast.
仅用于HTML文档,该文档加载速度非常快。 Your code should look like this then:
您的代码应如下所示:
$(document).ready(function(){
// all your other code
});
Edit: Try using this code: 编辑:尝试使用此代码:
$(document).ready(function(){
var width = 100,
perfData = window.performance.timing,
EstimatedTime = -(perfData.loadEventEnd - perfData.navigationStart),
time = parseInt((EstimatedTime/1000)%60)*100;
$(".loadbar").animate({
width: width + "%"
}, time);
$(".glow").animate({
width: width + "%"
}, time);
var PercentageID = $("#precent"),
start = 0,
end = 100,
durataion = time;
animateValue(PercentageID, start, end, durataion);
function animateValue(id, start, end, duration) {
var range = end - start,
current = start,
increment = end > start? 1 : -1,
stepTime = Math.abs(Math.floor(duration / range)),
obj = $(id);
var timer = setInterval(function() {
current += increment;
$(obj).text(current + "%");
if (current == end) {
clearInterval(timer);
}
}, stepTime);
}
$(window).load(function(){
$('.preloader-wrap').fadeOut(300);
$('.wrap').fadeIn(300);
});
});
The only condition to get that to work, is that you put all your content inside the .wrap
div 使其
.wrap
的唯一条件是,将所有内容放入.wrap
div中
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.