浏览器下载页面时是否可以显示Twitter Bootstrap进度栏？

Question

I have a site with lots of large images and I'd like to display a twitter bootstrap progress bar while everything is loading.

Is it possible to do this? Does jquery have a way of tracking the progress of a page loading?

I'd like to display just a progress bar until all the css, js, and images, etc. have be downloaded.

Answer 1

You can try something like this:

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

I took the .imagesLoaded() code written by Paul Irish, and added an additional callback that's triggered every time an image is loaded. So for every image that's loaded, the progress bar progresses.

It's not entirely accurate because it doesn't track how much of any particular file is loaded, and I'm not entirely sure that's possible without complicating this code, so the progress bar only changes when an image is loaded rather than while it's loading.

I hope this helps.