Question

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

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

Answer 1

我推荐这个插件。太奇妙了从http://demo.inwebson.com/download/jpreloader.zip下载在此处查看http://www.inwebson.com/demo/jpreloader/

<script type="text/javascript" src="js/jpreLoader.js"></script>
<script type="text/javascript">// <![CDATA[
  $(document).ready(function() {
  $('body').jpreLoader();
    });
// ]]></script>

这里是新版本jpreloader 2.1的链接 http://demo.inwebson.com/download/jpreloader-v2.zip http://www.inwebson.com/demo/jpreloader-v2/

Answer 2

如果您的意思是仅在完全加载时显示内容，可以尝试以下两个选项：

1）将所有内容包装在<div id="wrapper" style="display:none;"></div>标记内，并在加载完成事件中显示如下：

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

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

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

编辑：使用gayadesign提供的queryLoader脚本，我取得了一些成功：D

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

$(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>");
        });
    }
},

Answer 3

你不能。

正如zzzzBov所说，目前尚不清楚会有多少内容，或内容的大小。

你可以用这样的东西“伪造”它（例如我正在使用图像）：

var percentCounter = 0;

$.each(arrayOfImageUrls, function(index, value) {
    $('<img></img>').attr('src', value)    //load image
        .load(function() {
            percentCounter = (index / arrayOfImageUrls.length) * 100;    //set the percentCounter after this image has loaded
            $('#yourProgressContainer').text(percentCounter + '%');
        });
});

正如我所提到的，这不是网站加载的真实百分比，而是对已加载图像的粗略估计，假设每个图像的大小大致相同。

Answer 4

查看此项目。它做得很好。

http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/

演示在这里举行

http://www.gayadesign.com/scripts/queryLoader/

在此下载

http://www.gayadesign.com/scripts/queryLoader/queryLoader.zip

预加载百分比 - javascript / jquery

4 个答案: