質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

2840閲覧

jQuery InviewやLazyloadで画像要素を置換する方法(遅延読み込み)

yk32

総合スコア13

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/01/02 14:28

編集2017/01/03 13:18

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

自己解決いたしました。

上記の方法でも遅延読み込みが可能でした。
原因は画像の表示方法を2種類用意していたことが要因でした。。

シングルページで①タイル表示と②リスト表示の両方が切り替えできるよう
スクリプトを書いていたのですが、今回①のみを修正しており、
②の方は手を加えていなかったため、どんな方法をとっても
重たくなっておりました。

イージーなミスとなります。

投稿2017/01/03 14:16

yk32

総合スコア13

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問