预加载百分比 - javascript/jquery答案

【问题标题】：preload with percentage - javascript/jquery预加载百分比 - javascript/jquery
【发布时间】：2011-06-27 08:21:33
【问题描述】：

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

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

【问题讨论】：

没有办法知道页面上有多少内容，或者加载了多少进度。
有可能，看看这个例子gayadesign.com/scripts/queryLoader
@Fel 你刚刚回答了你自己的问题，那么？
但是这个例子使用了一个进度条我需要类似的东西flash-templates-today.com/blog/wp-content/uploads/2010/02/…
是的，但我很确定您链接到的示例可以很容易地适应显示百分比。编辑：事实上，它是：gayadesign.com/scripts/queryLoader2

标签： javascript jquery loading progress

【解决方案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/

【讨论】：

简单而伟大的插件！谢谢！
当我在后台下载一个巨大的网站时，这对我来说有点滞后，尤其是当从缓存的图像中加载内容时。

【解决方案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

我不得不对queryLoader.js 文件从第127 行到第151 行进行一些更改。更改后的脚本如下。自己试试吧。

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

【讨论】：

但问题是百分比的值，我不能在这个项目中放 gif
哎呀 :( [gay(a)design] @Fel 你在最后一行说你想在没有栏的情况下预加载，所以这将在这种情况下工作。为了显示百分比，我正在尝试找出一些东西。你给出的例子（gaydesign）看起来很有希望。

【解决方案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 + '%');
        });
});

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

【讨论】：

+1 我不会说你“不能”，但这是我最喜欢的解决方案。
我喜欢这种方式。但根据我的实验，我认为，使用each 的迭代不会以相同的顺序给出索引值。相反，它有时可能是随机的。因此，我没有除以index，而是使用了一个单独的变量，该变量每次都会增加 1，我将此计数器变量除以数组的长度，然后乘以 100 以获得百分比。
@elwyn 它显示给我Uncaught ReferenceError: arrayOfImageUrls is not defined??
arrayOfImageUrls 是您自己代码中的示例变量，您需要自己实际制作。例如var arrayOfImageUrls = ['https://example.com/foo.jpg', https://example.com/bar.jpg'];

【解决方案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

【讨论】：