jquery lazyload.js cssでulを左右に分けた場合の右側の読み込みがうまくいかない

Question

jquery lazyload.js を使用した画像の遅延読み込みですが、画像の様な読み込み順になってしまい右側の画像が上から読み込まれません。
ul class="ccc" の画像を上から読み込ませる方法はあるのでしょうか。

js　Masonry　や　css　display:grid、column-count　は使用しない方法でお願いします。

よろしくおねがいします。

<div clas="aaa">
	<ul class="bbb">
		<li><img class="lazy" src="dummy.png" data-original="画像" alt="" /></li>
		<li><img class="lazy" src="dummy.png" data-original="画像" alt="" /></li>
		<li><img class="lazy" src="dummy.png" data-original="画像" alt="" /></li>
	</ul>
	<ul class="ccc">
		<li><img class="lazy" src="dummy.png" data-original="画像" alt="" /></li>
		<li><img class="lazy" src="dummy.png" data-original="画像" alt="" /></li>
		<li><img class="lazy" src="dummy.png" data-original="画像" alt="" /></li>
	</ul>
</div>

.aaa {
	width:100%;
}

.aaa ul{
	width:50%;
	margin:0;
	padding:0;
	display:inline-block;
	font-size:0;
	vertical-align:top;
}

.aaa ul li{
	width:100%;
	margin:0 0 10px 0;
}

.aaa ul li img{
	width:90%;
	height:auto;
	margin:0 5%;
}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="lazyload.js"></script>
<script>
$(function() {
    $('img.lazy').lazyload();
});
</script>

Answer 1

HTML の構造を変えたくないなら、JavaScript でどうにかするしかないかなと思います。
また、見える範囲に入った画像、もしくはその少し上までスクロールしたときに画像を読む込むタイプの Lazyload ライブラリを使えば一発で解決します。

• verlok/lazyload

どうしてもこの Lazyload プラグインを使いたい！というのであれば左右交互になるように配列を作って適用しましょう。

var $aaaImages = [];
var $bbbImages = $('.aaa > .bbb img.lazy');
var $cccImages = $('.aaa > .ccc img.lazy');

// 画像が多い方のリストをループに使う
var itrTarget =
  $bbbImages.length >= $cccImages.length ? $bbbImages : $cccImages;

// 左右交互に配列に追加していく
itrTarget.each(function(index) {
  if ($bbbImages.length - 1 >= index) {
    $aaaImages.push($bbbImages.get(index));
  }

  if ($cccImages.length - 1 >= index) {
    $aaaImages.push($cccImages.get(index));
  }
});

// jQuery オブジェクトに変換する
$aaaImages = $($aaaImages);

// Lazyload を適用
$aaaImages.lazyload();

Comments

[sud55s]

どちらも理想のものです。ありがとうございます。