画像スライダーの後に記述したlazyloadさせている画像が正しくロードされない

Question

lazyloadの使用をやめる以外の解決方法がございましたらご教授願います。

実現したいこと

• 画像スライダーの下に配置している画像(単体)をlazyloadさせたい

発生している問題

• 遅延ロードさせたい単体画像が表示領域に入った時にロードされず、さらにページをスクロールするとロードされる
• スライダーより上に配置している画像(この場合dummy1～3)は正しく遅延ロードされる

該当のソースコード

<p><img src="loader.gif" data-original="dummy1.gif"></p>
<p><img src="loader.gif" data-original="dummy2.gif"></p>
<p><img src="loader.gif" data-original="dummy3.gif"></p>
<ul class="slick_body">
  <li><img src="loader.gif" data-original="dummy1.gif"></li>
  <li><img src="loader.gif" data-original="dummy2.gif"></li>
  <li><img src="loader.gif" data-original="dummy3.gif"></li>
</ul>
<p><img src="loader.gif" data-original="dummy4.gif"></p>
<p><img src="loader.gif" data-original="dummy5.gif"></p>
<p><img src="loader.gif" data-original="dummy6.gif"></p>

$(function () {
  'use strict';
  $('img').lazyload();
  $('.slick_body').slick();
});

試したこと

• スライダー部分を他のライブラリ(swiper.js)に変える ⇒同様の不具合が発生
• スライダー本体の高さを指定したり、あらかじめ子要素が横並びになるようにcssを指定する⇒不具合解消せず
• lazyloadの閾値を変更⇒スライダーより下の画像も遅延ロードされるようになったが、スライダーの中身の画像枚数が増えるたびに数値を変更する必要がある

補足情報

• jquery ver.2.2.0、Lazy Load ver.1.9.7を使用しています

Comments

[m.ts10806]

おおよその原因は検討がつくのですが（不具合というより仕様ですね）、slickとlazyloadの記述順を逆にした場合はどうですか？

[sunagimochan]

アドバイスありがとうございます。 『試したこと』の項目に書き忘れましたが、記述を逆にする・htmlでjsの読み込みを順を逆にしたりしてみましたが解消しませんでした。仕様であるならば諦めるしかないのでしょうか。