スクロールして見えなくなった画像のロードを遅らせたい

前提・実現したいこと

初投稿です。書き方がルールに沿っていない場合はご指摘いただけると幸いです。

スマートフォン向けにjspで画像をサムネイル表示で閲覧する機能を作っています。
無限スクロールをページ内で実装しており、最下部にスクロールするごとに画像が下に追加されていくページなのですが、
ユーザビリティの関係上、画像をページ全体で読み込むのではなく、見ている部分のみ表示したいというのが実現したい機能です。

遅延ロードも実装して試してみたのですが、スクロールした箇所が全て読み込まれるのではなく、スクロールした後、見えなくなった部分(上部に隠れた部分)については読み込みを一旦停止し、”再度上部にスクロールした際には読み込まれて”欲しいです。
chromeでは、その処理は特に記述しなくても、見ている部分を判断して表示してくれるのですが、firefox,safari等でも同様に表示したいのです。

そのような機能を実装する方法がございましたら、是非ご教示いただきたいです。
よろしくお願いいたします。

該当のソースコード

本質問の解決には役に立つか微妙ですが、一応該当のコードを記載しておきます。

jsp
1 <table>
2   <c:forEach var="tate" begin="0" end="29">
3     <tr>
4       <c:forEach var="yoko" begin="0" end="3">
5         <c:set var="file" value="${form.img[tate*4+yoko]}" />
6         <td>
7           <div>
8             <a><img src="/hoge/${file}"/></a> //一意の画像を取得している
9           </div>
10         </td>
11       </c:forEach>
12     </tr>
13   </c:forEach>
14 </table>
15 //下部にajaxでtable毎にデータを取得

行動規範の内容に同意します

回答1件

ベストアンサー

$.ajaxのインスタンスに対して.abort()を発行してみてください

javascript
1$(function(){
2  var ajax=new $.ajax({
3  url:"hoge.json",
4  }).done(function(data){
5    console.log(data);
6  });
7  setTimeout(function(){
8    ajax.abort();
9    console.log("abort");
10  },1000);
11});

仮に、上記hoge.jsonの読み込みが1秒よりかかるなら
非同期で処理するabortが実行されて、ajax処理はキャンセルされます

※実際にはnewはなくてもいけるので、意味合い的には「$.ajaxの戻り値をabortする」
でよいかもしれません

投稿2019/08/26 03:09

編集2019/08/26 05:24

yambejp

総合スコア114843

makosankibu

2019/08/26 05:06

素早い回答ありがとうございます。無限スクロール(ajax部分)は「jScroll」を使用しています。五月雨式の質問内容かつ、ajaxの仕様について無知で申し訳ないのですが、$.ajaxのインスタンスというのは ```ajax var instance = new $.ajax({...}); instance.abort(); ``` とするということでよろしいでしょうか。

makosankibu

2019/08/26 05:09

また、画像が上部にスクロールされて見えなくなったという条件分岐を作り、そこでabort()を実行するという認識で合ってますでしょうか。すみませんが、こちらも併せてご回答のほど、よろしくお願いいたします。

yambejp

2019/08/26 05:26

サンプル追記しておきました > 画像が上部にスクロールされて見えなくなったという条件分岐を作り実装の仕方についてはサービス側の好きにすればいいでしょう。見えなくなったら中断するのが命題であれば、追加質問のとおりの仕様で問題ないとは思います

makosankibu

2019/08/26 05:50

とても分かりやすい追加の回答ありがとうございます。理解しました。ただ言葉足らずだったのですが、画像は上にスクロールされていったら読み込みを停止し、再度上部に戻った際には読み込まれていなかった画像が読み込まれてほしいのです。私の解釈ではabort()のみだと読み込みがキャンセルされてしまうと思いました… 質問には追加しておきます

yambejp

2019/08/26 07:15

「読み込みを一旦停止」の仕様次第でしょうね。イメージ的には処理を軽くするならabortだと認識ましたがオンメモリで保持して置けるならabortやめてデータは最後までよんでおき適当な変数に保持しておくか環境が許すならlocalStorageなど利用することでしょうかムービーを流しっぱなしにしたり、３Dで表示したり、過剰にアニメーションするなどでなければ画面外で描画されてもされなくてもさほど付加はかわらない気はしますがコンテンツ次第なので検証しながらやるしか無いと思います

makosankibu

2019/08/26 07:42

なるほど... 現状コンテンツは全て、pngかimgなのですが、ページの表示に時間がかかっている状況で、次の無限スクロールが中々読み込まれず、ユーザビリティが低い状態です。 >ムービーを流しっぱなしにしたり、３Dで表示したり、過剰にアニメーションするなどでなければ... 素画像のみの読み込みの為、画像の表示の仕方が悪いのかもしれません。そちらも調べてみます。仕様としては、複数のユーザが使用する想定で大量の画像を扱いますし、かつ画像の削除機能があります為、localStrageは導入しにくいです。(後出しですみません。)

yambejp

2019/08/26 07:49

うーんそうなると、結局abortしてしまって、スクロールバックして画面内に来たときに再読み込みするしかないのでは？画像自体が最後までよまれたかどうかはloadイベントのstatusでわかるので loadさえ完了していればキャッシュが期待できます

makosankibu

2019/08/26 08:50

システムを見直してみました。クライアント側では、画像のサイズも200B程度しかなくそもそもページの表示が遅いのはサーバ側に問題があると判断致しました。まずは、サーバー側の見直し、修正をしたいと思います。確かにその方法でしたら実現できそうですが、ライブラリを使用している為、内部をいじる必要があること、画像をDBに保存しているのでキャッシュの関係上、実装難度が高いと感じました。その方法を採用するかは、慎重に検討しないといけなそうです。一旦は本質問を締め切ってまた近いうちに新しくご質問致します。その際は、又よろしくお願いいたします。ありがとうございました。

行動規範の内容に同意します