でびぞー徒然日記

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);
			}
		}

全部じゃないけど、あとは察して。

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