Q&A前提・実現したいこと
tuupola様の jquery.lazyload.min.js を使用しlazyloadの実装したところ
画像の読み込みの順番が気になり、質問をさせて頂きました。
下記の該当のソースコードに記載しております
id"image01"がlazyloadにより"幅300px高さ200pxの画像.jpg""の画像読み込みが始まるとき
左右に隣り合わせであるid"image07"の読み込みも始まって欲しいが
"1pxの正方形画像.gif"のままで変化がない。
id"image06"の読み込み後、id"image07"の読み込みが始まる。
jquery-3.5.1.min.js を導入済み。
解決法のご教授をお願い致します。
該当のソースコード
<html> <head> <script type="text/javascript" src="./jquery-3.5.1.min.js"></script> <script type="text/javascript" src="./jquery.lazyload.min.js"></script> <script> $(function(){ $("img.test_lazyload,.test_lazyload img").lazyload({ threshold:200,effect:"fadeIn"}); }); </script> </head> <body> <!-- 高さが1500px以上のコンテンツがあります。 --> <div width="1000" id="main"> <ul style="float:left;width:50%" class="test_lazyload"> <li><img src="1pxの正方形画像.gif" data-original="幅300px高さ200pxの画像.jpg" id="image01"></li> <li><img src="1pxの正方形画像.gif" data-original="幅300px高さ200pxの画像.jpg" id="image02"></li> <li><img src="1pxの正方形画像.gif" data-original="幅300px高さ200pxの画像.jpg" id="image03"></li> <li><img src="1pxの正方形画像.gif" data-original="幅300px高さ200pxの画像.jpg" id="image04"></li> <li><img src="1pxの正方形画像.gif" data-original="幅300px高さ200pxの画像.jpg" id="image05"></li> <li><img src="1pxの正方形画像.gif" data-original="幅300px高さ200pxの画像.jpg" id="image06"></li> </ul> <ul style="float:right;width:50%" class="test_lazyload"> <li><img src="1pxの正方形画像.gif" data-original="幅300px高さ200pxの画像.jpg" id="image07"></li> <li><img src="1pxの正方形画像.gif" data-original="幅300px高さ200pxの画像.jpg" id="image08"></li> <li><img src="1pxの正方形画像.gif" data-original="幅300px高さ200pxの画像.jpg" id="image09"></li> <li><img src="1pxの正方形画像.gif" data-original="幅300px高さ200pxの画像.jpg" id="image10"></li> <li><img src="1pxの正方形画像.gif" data-original="幅300px高さ200pxの画像.jpg" id="image11"></li> <li><img src="1pxの正方形画像.gif" data-original="幅300px高さ200pxの画像.jpg" id="image12"></li> </ul> <br style="clear:both"> </div> <!-- 高さが500px以上のコンテンツがあります。 --> </body> </html>試したこと
クラス「test_lazyload」の付与箇所の変更
回答2件
0
試したわけではないですが、画像を同じサーバーに置いているのであれば同時接続数の制限があるので一気に全画像取りに行くことはしないのではないかと思います。
身につけておきたいWebサイト高速化テクニック #2｜検証ツールとそもそもHTTPって何だ編 | Developers.IO
投稿2020/05/29 06:31
総合スコア441
0
自己解決
lazyroadを宣言する際に"failure_limit"を追加で解決いたしました。
failure_limitとは
何枚目までチェックするかを指定するもので、例えばfailure_limit: 9の場合、画面外にある1番目から10番目の画像をチェックして、画面内にある場合は表示されるようになります。
参考：http://cly7796.net/wp/javascript/plugin-jquery-lazyload/
投稿2020/06/01 09:31
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/05/29 06:54 編集
2020/05/29 07:20
2020/05/29 07:22
2020/05/29 07:44