kamosica.jp

« Behanceを始めてみました。その他、動向など。 | メイン | cherry-blossom - Animated »

2014年3月30日

Jquery: Webブラウザに指定の順序で画像をロードさせる >>インターネット  | >>ソフトウェア 

HTMLで記述した際に、画像が連番でロードされる保証はありません。
・縦に長いページを作った場合
・擬似的に電子ブックを作る場合
など、画像を連番でロードさせるというテクニックは役に立つことがあるかもしれません。

JqueryのimagesLoadedを使って実装することができます。
classパラメータをつけたdivなどを空白画像でhtmlに記述しておき、ロード順序にしたがってattrを変えていくということです。 これができれば、swipeで順々に画像を表示する際に画像(ページ)が連番にならないことがあるというようなことはなくなります。
attrの要素は非表示にした上で、loadingを表示させるとか、そのあたりのエフェクト周りなんかもJqueryでがりごり書こうと思えばかけるはず。

		function setImg(v,reload)
		{
			var addparam;
			var i = v;
			if (reload == 1) { addparam = 0; }
			else
			{
				addparam = 1;
			}

			if (i <= AryItems[AryItems.length -1])
			{
				$("#nod" + (i + addparam)).attr('src', "./img/" + AryItems[i - addparam] + ".jpg");
				$("#nod" + (i + addparam)).css('display', "block");
				$("#nod" + (i + addparam)).fadeTo(500,1);
				var dfd = $("#nod" + (i + addparam)).imagesLoaded();
				dfd.fail( function(){
					TimerID = setTimeout(function(){ rsetImg(i,1) } ,200 );
				});
				dfd.done( function(){
					TimerID = setTimeout(function(){ setImg(i + 1,0) } ,400 );
				});
			}
			else
			{
				//window.alert(v);
			}
		}
全部じゃないけど、あとは察して。
twitterこの記事をTwitterでみんなに教える。

投稿者 debizoh : 2014年3月30日 13:10



トラックバック

記事投稿日から60日間のみ、トラックバックを受け付けます。

このエントリーのトラックバックURL:
http://debz-di.kabocha.to/cgi/MT/mt-tb.cgi/1748

コメント

この記事へコメントを投稿する。

コメントは管理人が承認後に掲載されます。




保存しますか?



画像の中に見える文字を入力してください。