質問するログイン新規登録

質問編集履歴

2

更新

2017/06/16 04:40

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -17,10 +17,10 @@
17
17
  <script>
18
18
  if (!window.jQuery) document.write('<script src="/js/jquery-3.2.1.min.js"><\/script>')
19
19
  </script>
20
- <script type="text/javascript" src="/js/vendor/jquery.lazyload.min.js"></script>
20
+ <script type="text/javascript" src="/js/jquery.lazyload.min.js"></script>
21
- <script src="/js/vendor/scrollsmoothly.js"></script>
21
+ <script src="/js/scrollsmoothly.js"></script>
22
- <script type="text/javascript" src="/js/vendor/jquery.jscrollpane.min.js"></script>
22
+ <script type="text/javascript" src="/js/jquery.jscrollpane.min.js"></script>
23
- <script type="text/javascript" src="/js/vendor/slick.min.js"></script>
23
+ <script type="text/javascript" src="/js/slick.min.js"></script>
24
24
  <script src="/js/sample.js"></script>
25
25
  </body>
26
26
  ```

1

ソースコード追加

2017/06/16 04:40

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,4 +1,38 @@
1
1
  表題の件ですが、エラーもなくただ単に画像が先に読み込まれてしまうときと、
2
2
  lazy loadがうまく動作するときがあるのですが、原因がわかりません。
3
3
 
4
- lazyload自体はbodyの閉じる前、jqueryの下においてあります。
4
+ lazyload自体はbodyの閉じる前、jqueryの下においてあります。
5
+
6
+
7
+ ```
8
+ <body>
9
+ <ul>
10
+ <li><img class="lazy" data-original="../img/p_1.png"></li>
11
+ <li><img class="lazy" data-original="../img/p_2.png"></li>
12
+ <li><img class="lazy" data-original="../img/p_3.png"></li>
13
+ <li><img class="lazy" data-original="../img/p_4.png"></li>
14
+ </ul>
15
+
16
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
17
+ <script>
18
+ if (!window.jQuery) document.write('<script src="/js/jquery-3.2.1.min.js"><\/script>')
19
+ </script>
20
+ <script type="text/javascript" src="/js/vendor/jquery.lazyload.min.js"></script>
21
+ <script src="/js/vendor/scrollsmoothly.js"></script>
22
+ <script type="text/javascript" src="/js/vendor/jquery.jscrollpane.min.js"></script>
23
+ <script type="text/javascript" src="/js/vendor/slick.min.js"></script>
24
+ <script src="/js/sample.js"></script>
25
+ </body>
26
+ ```
27
+
28
+ ```
29
+ // sample.js
30
+
31
+ $(function(){
32
+ $('img.lazy').lazyload({
33
+ threshold: 100,
34
+ effect: "fadeIn",
35
+ effect_speed: 5000
36
+ });
37
+ });
38
+ ```