当前位置：文江博客话题详情

用百分比预加载 - javascript/jquery

发布于 2024-10-17 10:06:22 字数 97 浏览 3 评论 0原文

我进行了谷歌搜索，但找不到用百分比加载的方法。有人知道我如何找到这样的例子吗？

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

残花月 2024-10-24 10:06:22

我推荐这个插件。太神奇了
从 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/

I recommend this plugin. Its amazing
download from http://demo.inwebson.com/download/jpreloader.zip
see in action here 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>

here are the links to new version jpreloader 2.1
http://demo.inwebson.com/download/jpreloader-v2.zip
http://www.inwebson.com/demo/jpreloader-v2/

回复收藏 0 原文

一世旳自豪 2024-10-24 10:06:22

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

1) 将所有内容包装在

中;

标签和加载完成事件显示如下：

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

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

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

编辑：使用 queryLoader 脚本由 gayadesign 提供，我取得了一些成功：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>");
        });
    }
},

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

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) 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
                });
});

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

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

回复收藏 0 原文

秋叶绚丽 2024-10-24 10:06:22

你不能。

正如 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 + '%');
        });
});

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

You can't.

As zzzzBov said, it isn't known how much content there will be, or what size that content is.

You could 'fake' it, with something like this (for the example I am using images):

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 + '%');
        });
});

As I mentioned this isn't a TRUE percentage of the sites loading, but a rough estimate of the images that have loaded, assuming each image is roughly the same size.

回复收藏 0 原文