预加载百分比 - javascript / jquery [英] preload with percentage - javascript/jquery

问题描述

我进行了Google搜索，但找不到按百分比加载的方法。有谁知道我怎么能找到一个例子？

I did a Google search and I cannot find a way to do a loading with percentage. Anyone know how I can find an example of that?

在显示内容之前，我需要从0到100的网站预加载，但我找不到任何示例。

I need a preload for a website from 0-100 without bar, before show the content, but I cannot find any example.

推荐答案

如果您想要仅在满载时显示内容，您可以尝试以下两个选项：

If you mean you want to show the content only when it is fully loaded, you may try following two options:

1）将所有内容包装在< div id =wrapperstyle =display：none;>< / div> 标签内加载完成事件显示如下：

1) wrap all content inside a <div id="wrapper" style="display:none;"></div> tag and on load complete event show it like this:

$(function(){
    $("#wrapper").show();
});

2）如果这仍然无法解决您的目的，您可以使用ajax加载空白页面并获取内容：

2) If this still does not solves your purpose, you can load empty page and fetch content using ajax:

$(function(){
    $.ajax({ 
        .......//AJAX params
        .......
        success:function(msg){
                    $("#wrapper").html(msg);//DO NEEDFUL WITH THE RETURNED VALUE
                });
});

编辑：使用 queryLoader 脚本提供的< a href =http://www.gayadesign.com/> gayadesign 我取得了一些成功：D

Using queryLoader script provided by gayadesign I was able to achieve some success :D

我必须做一些从第127行到151更改 queryLoader.js 文件。更改的脚本如下所示。自己尝试一下。

I had to made some changes to the queryLoader.js file from line 127 to 151. The changed script is as follows. Try it yourself.

$(QueryLoader.loadBar).css({
        position: "relative",
        top: "50%",
        font-size:40px;
    font-weight:bold;
    line-height:50px;
    height:50px;
    width:100px;
    });
},

animateLoader: function() {
    var perc = (100 / QueryLoader.doneStatus) * QueryLoader.doneNow;
    if (perc > 99) {
        $(QueryLoader.loadBar).stop().animate({
            width: perc + "%"
        }, 5000, "linear", function() {
                $(this).html("<strong>100%</strong>");//MY EDIT
                QueryLoader.doneLoad();
            });
    } else {
    $(QueryLoader.loadBar).stop().animate({
        width: perc + "%"
    }, 5000, "linear", function() {
            //MY EDIT
            $(this).html("<strong>"+Math.round(perc)+"%</strong>");
        });
    }
},

这篇关于预加载百分比 - javascript / jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！