hirokonaBlog

ググる→忘れそう→即時メモ 京都のWebデザイナーの備忘録

画像の読み込み中用のプログレスバーやローディング画面の実装 imagesloaded

頭の良い方の作ったファイルにジャンピング土下座ァアアアアアアアア!

いろんな書き方(jquery有り無しとか環境によって)に対応してくれて、いろんな値を返してくれる
プログレスバーの実装も可能じゃあぁああ!
(※IE7はうごきませんデシタけどね☆)
http://desandro.github.io/imagesloaded/

サンプルメモ(部分抽出)
[html]
$(‘body’).imagesLoaded()
.always( function( instance ) {
console.log(‘all images loaded’);
})
.done( function( instance ) {
console.log(‘all images successfully loaded’);
})
.fail( function() {
console.log(‘all images loaded, at least one is broken’);
})
.progress( function( instance, image ) {
var result = image.isLoaded ? ‘loaded’ : ‘broken’;
console.log( ‘image is ‘ + result + ‘ for ‘ + image.img.src );
i ++;
console.log( i +’/’+instance );
console.log( instance.images.length );
});
[/html]

ほかにこんなのもあるよ☆

HTML5演出に最適な複数画像読み込み管理のJSライブラリ「LoadManager.js」


投稿日

カテゴリー:

投稿者:

タグ:

コメント

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください