lazy loadを導入したのですが、うまく動作するときと画像が先に読み込まれてしまうときがあります。

表題の件ですが、エラーもなくただ単に画像が先に読み込まれてしまうときと、
lazy loadがうまく動作するときがあるのですが、原因がわかりません。

lazyload自体はbodyの閉じる前、jqueryの下においてあります。

<body>
<ul>
    <li><img class="lazy" data-original="../img/p_1.png"></li>
    <li><img class="lazy" data-original="../img/p_2.png"></li>
    <li><img class="lazy" data-original="../img/p_3.png"></li>
    <li><img class="lazy" data-original="../img/p_4.png"></li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
  if (!window.jQuery) document.write('<script src="/js/jquery-3.2.1.min.js"><\/script>')
</script>
<script type="text/javascript" src="/js/jquery.lazyload.min.js"></script>
<script src="/js/scrollsmoothly.js"></script>
<script type="text/javascript" src="/js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="/js/slick.min.js"></script>
<script src="/js/sample.js"></script>
</body>

// sample.js

$(function(){
  $('img.lazy').lazyload({
    threshold: 100,
    effect: "fadeIn",
    effect_speed: 5000
  });
});

m.ts10806

2017/06/16 04:26

現時点のコードをご提示ください。

退会済みユーザー

2017/06/16 04:39

追記致しました。よろしくお願いいたします。

m.ts10806

2017/06/16 04:41

ブラウザにより何か違いはありましたか？

退会済みユーザー

2017/06/16 06:05

いえ、一緒でした。

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

回答1件

CSSで画像の高さは指定しているでしょうか？
そうでなければ、すべてが画面内に入っていて読み込まれることもありそうです。

投稿2017/06/16 04:51

x_x

総合スコア13749

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

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

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

lazy loadを導入したのですが、うまく動作するときと画像が先に読み込まれてしまうときがあります。

関連した質問