ios向けにHTML+javascriptにて画像アルバムアプリを作成中です。
数百枚の画像を読み込む際に画面領域に要素が入ったら表示を行う遅延ロードが必要となり、
下記のスクリプトにて表示させているものに対してJQueryのLazyLoadを実装しましたが、
エフェクト自体は全体にかかるものの、既に全画像が読み込まれており、
表示領域に入ったら本来の画像を表示するダミー画像の置換がうまくいきません。
似たようなものでjQuery Inviewというものを見つけましたがそちらも同様に希望する動作にはなりません。
スクロールすると画面領域に入ったことは感知しております。
しかしlist(i)のクラス属性を持ったdtタグの内側に書き込んだimg要素の指定、
data-originalの取得とsrcの内容を本来の画像に書き換える方法がわかりません。
※下記のスクリプトはテスト的に画面領域に入ったら本来の画像を表示、入っていなければダミー画像となるようにしています。
こちらは見た目は希望する動作なのですが、実際のところはページを表示した瞬間からすべての画像を読み込もうとしてまっております。
ご教授お願い頂けますと幸いでございます。
Javascript
1 2<head> 3 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 4 <script type="text/javascript" src="js/jquery.inview.min.js"></script> 5</head> 6 7<body> 8 9<script> 10 var item=100; 11 var ar = new Array(300) ; 12 13 function getUserImages(i){ 14 15 var total = parseInt(i); 16 $.get("http://example.com/item/" + total + ".txt", function(data){ 17 18 var resArray = data.split(","); 19 var name = resArray[0]; 20 21 $('dt.list'+ total).on('inview', function(event, isInView, visiblePartX, visiblePartY) { 22 if (isInView) { 23 //スクロールするとtrueが返ってきているので画面領域に入ったことは感知している様子 24 //本来表示したい画像 25 $("dt.list" + total).html('<font size="0.1px" style="vertical-align: middle;">' + name + 26'</font><a href=#' + ' id="' + total + '" title="' + data + 27'" onclick="return users(this)"><img class="lazy" src="' + total + '.jpg"></a >'); 28 29 }else{ 30 //サイズの小さいダミー画像 31 $("dt.list" + total).html('<font size="0.1px" style="vertical-align: middle;">' + name + 32'</font><a href=#' + ' id="' + total + '" title="' + data + 33'" onclick="return users(this)"><img class="lazy" src="' + dammy + '.jpg"></a >'); 34 35 36 } 37 38 39 }); 40 } 41 42 for (i=1 ; i<=item ; i++){ 43 document.write('<dt class="list' + i + '"></dt>'); 44 getUserImages(i); //外部テキストと画像を表示する 45 } 46 47 48</script> 49</body> 50 51 52
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。