大きな画像がたくさんあるサイトがあり、すべての読み込み中に Twitter ブートストラップ プログレス バーを表示したいと考えています。
これを行うことは可能ですか?jquery には、ページの読み込みの進行状況を追跡する方法がありますか?
すべてのcss、js、画像などがダウンロードされるまで、進行状況バーのみを表示したいと思います。
大きな画像がたくさんあるサイトがあり、すべての読み込み中に 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() コードを使用して、画像が読み込まれるたびにトリガーされる追加のコールバックを追加しました。そのため、読み込まれるすべての画像に対して、プログレス バーが進行します。
特定のファイルがどれだけロードされているかを追跡していないため、完全に正確ではありません。また、このコードを複雑にせずにそれが可能かどうかは完全にはわかりません。
これが役立つことを願っています。