是否有可能在浏览器下载页面时显示Twitter引导进度条?

Is it possible to display a Twitter Bootstrap Progress bar while the browser downloads the page?

本文关键字：Twitter 显示 有可能 浏览器 下载 是否      更新时间：2023-09-26

我有一个有很多大图片的网站，我想在一切加载时显示一个twitter引导进度条。

这是可能的吗?jquery有跟踪页面加载进度的方法吗?

我想只显示一个进度条，直到所有的css, js和图像等已经下载。

您可以尝试这样做:

HTML 

<div class="progress progress-striped active">
    <div class="bar"></div>
</div>
<div class="imagelist">
    <img src="http://studio7designs.com/wp-content/uploads/green-grass.jpeg"/>
    <img src="http://studio7designs.com/wp-content/uploads/rowboat-600x398.jpg"/>
    <img src="http://studio7designs.com/wp-content/uploads/blue-wheat-grass.jpeg"/>
    <img src="http://studio7designs.com/wp-content/uploads/rocks.jpg"/>
    <img src="http://studio7designs.com/wp-content/uploads/sun-grass-golden.jpg"/>
    <img src="http://studio7designs.com/wp-content/uploads/blue-water-photo.jpg"/>
    <img src="http://studio7designs.com/wp-content/uploads/flight.jpg"/>
</div>
Javascript 

$.fn.imagesLoaded = function (callback, onEach) {
    var elems = this.filter('img'),
        len = elems.length,
        blank = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
    elems.bind('load.imgloaded', function () {
        if(typeof onEach === 'function'){
            onEach(len, elems.length); // runs on every image load
        }
        if (--len <= 0 && this.src !== blank) {
            elems.unbind('load.imgloaded');
            callback.call(elems, this);
        }
    }).each(function () {
        // cached images don't fire load sometimes, so we reset src.
        if (this.complete || this.complete === undefined) {
            var src = this.src;
            // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
            // data uri bypasses webkit log warning (thx doug jones)
            this.src = blank;
            this.src = src;
        }
    });
    return this;
};
$(document).ready(function () {
    var progress = $('.progress');
    var progressbar = progress.children('.bar');
    $('.imagelist img').imagesLoaded(function () {
        progressbar.width('100%');
        progress.fadeOut();
    }, function (left, total) {
        progressbar.width((total - left) / total * 100 + '%');
    });
});

我采用Paul Irish编写的. imagesloaded()代码，并添加了一个每次加载图像时触发的额外回调。对于每一个加载的图片，进度条都会前进。

这不是完全准确的，因为它不跟踪任何特定文件的加载量，我不完全确定如果不使代码复杂化，这是可能的，所以进度条只在加载图像时改变，而不是在加载时。

相关文章：