js插件---延迟加载库lazy load
一、总结
一句话总结：
使用插件的时候，把必要的东西都配上：使用lazy load，因为没写图片的src，造成部分图片显示，部分不显示的问题，所以下次使用这些插件，把必要的东西都配上
1、lazy load最好配上data-srcset（就算不是因为img的srcset的响应式加图），这样加载不易出错？
加上这个响应式，有备无患，避免一些莫名其妙的错误
<img class="fry_lazy"
src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs="
data-src="{{$lesson['l_preview_s']}}"
data-srcset="{{$lesson['l_preview_s']}} 350w"
style="max-width: 100%;min-height: 80px;" alt=""> 2、lazy load只显示一半的图片（部分图片显示，部分不显示）？
可能是因为图片的src置为空的问题，往图片的src里面加上默认图片就好了：要把所有关键的东西都整全
<img class="fry_lazy"
src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs="
data-src="{{$lesson['l_preview_s']}}"
data-srcset="{{$lesson['l_preview_s']}} 350w"
style="max-width: 100%;min-height: 80px;" alt=""> 3、图片的响应式怎么做？
可以不用懒加载lazy load的data-srcset属性，而是直接分配合适图片，比如课程列表，无论首页还是课程选择页，400宽度都够
4、lazy load使用注意？
图片要指定宽高，不然可能就没有lazy load的效果
5、找插件的方式（比如lazy load）？
a、可以先去百度上面找找，不过百度上面的资料一般都很陈旧，而且都是转载来转载去，
b、可以直接去github上面找，找star高的，找一直在维护的
二、延迟加载库lazy load
博客对应课程的视频位置：
核心代码：
html相关代码
@include('home.app.lazyload')
<div class="row">
@foreach($lesson_list as $lesson)
<div class="col-md-3 col-sm-4 col-xs-6" style="margin-bottom: 20px;">
<div class="choose_lesson_box" >
<div class="choose_lesson_imgbox">
<a href="/lesson/{{$lesson['l_id']}}">
<img class="fry_lazy"
src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs="
data-src="{{$lesson['l_preview_s']}}"
data-srcset="{{$lesson['l_preview_s']}} 350w"
style="max-width: 100%;min-height: 80px;" alt="">
</a> js相关代码：
<script>
var fry_lazy_load = new LazyLoad({
elements_selector: "img.fry_lazy",
});
</script> 三、基本demo
lazy load官网api：https://github.com/verlok/lazyload
目录结构：
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8" />
5 <title>
6 Lazyload测试
7 </title>
8 <meta name="viewport" content="width=device-width, initial-scale=1" />
9 <style>
10 ul,
11 li {
12 list-style-type: none;
13 margin: 0;
14 padding: 0;
15 }
16
17
18
19 img {
20 display: block;
21 }
22
23
24
25 </style>
26 </head>
27 <!--
28
29 注意：
30 自己测试
31 1、图片带上宽高，不然懒加载可能不生效
32 2、img还要设置成block
33
34 项目中的话：
35 记得src不能为空
36
37 -->
38 <body>
39 <div id="results1" class="results">
40 <ul>
41 <li>
42 <a href="#/it/donna/stivaletti_cod44721746jj.html"
43 ><img
44 alt="Stivaletti"
45 src="https://via.placeholder.com/440x560?text=Img+01"
46 width="220"
47 height="280"
48 /></a>
49 </li>
50
51 <li>
52 <a href="#/it/donna/open-toe_cod44740806jx.html"
53 ><img
54 alt="Open toe"
55 src="https://via.placeholder.com/440x560?text=Img+02"
56 width="220"
57 height="280"
58 /></a>
59 </li>
60 <li>
61 <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44735977gr.html"
62 ><img
63 alt="Sneakers & Tennis"
64 class="lazy"
65 data-src="https://via.placeholder.com/440x560?text=Img+03"
66 width="220"
67 height="280"
68 /></a>
69 </li>
70 <li>
71 <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44738717am.html"
72 ><img
73 alt="Sneakers & Tennis shoes basse"
74 class="lazy"
75 data-src="https://via.placeholder.com/440x560?text=Img+04"
76 width="220"
77 height="280"
78 /></a>
79 </li>
80 <li>
81 <a href="#/it/donna/sneakers-tennis-shoes-alte_cod44739940cb.html"
82 ><img
83 alt="Sneakers & Tennis shoes alte"
84 class="lazy"
85 data-src="https://via.placeholder.com/440x560?text=Img+05"
86 width="220"
87 height="280"
88 /></a>
89 </li>
90 <li>
91 <a href="#/it/donna/sneakers-tennis-shoes-alte_cod44740860xg.html"
92 ><img
93 alt="Sneakers & Tennis shoes alte"
94 class="lazy"
95 data-src="https://via.placeholder.com/440x560?text=Img+06"
96 width="220"
97 height="280"
98 /></a>
99 </li>
100 <li>
101 <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44738719vn.html"
102 ><img
103 alt="Sneakers & Tennis shoes basse"
104 class="lazy"
105 data-src="https://via.placeholder.com/440x560?text=Img+07"
106 width="220"
107 height="280"
108 /></a>
109 </li>
110 <li>
111 <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html"
112 ><img style="width: 100%"
113 alt="Sneakers & Tennis shoes basse"
114 class="lazy"
115 data-src="../imgs/前端性能优化_350.jpg"
116 /></a>
117 </li>
118 <li>
119 <a href="#/it/donna/sneakers-tennis-shoes-basse_cod44739938wk.html"
120 >
121 <img src="" alt="" class="lazy"
122 data-src="../imgs/VUE源码解析_350.jpg"
123 data-srcset="../imgs/VUE源码解析_350.jpg 350w, ../imgs/VUE源码解析_700.jpg 700w, ../imgs/VUE源码解析_1000.jpg 1000w"
124 >
125 </a>
126 </li>
127
128 </ul>
129 </div>
130 <script src="lazyload.min.js"></script>
131 <script>
132 (function() {
133 function logElementEvent(eventName, element) {
134 console.log(Date.now(), eventName, element.getAttribute("data-src"));
135 }
136
137 var callback_enter = function(element) {
138 logElementEvent("🔑 ENTERED", element);
139 };
140 var callback_exit = function(element) {
141 logElementEvent("🚪 EXITED", element);
142 };
143 var callback_reveal = function(element) {
144 logElementEvent("👁️ REVEALED", element);
145 };
146 var callback_loaded = function(element) {
147 logElementEvent("👍 LOADED", element);
148 };
149 var callback_error = function(element) {
150 logElementEvent("💀 ERROR", element);
151 element.src = "https://via.placeholder.com/440x560/?text=Error+Placeholder";
152 };
153 var callback_finish = function() {
154 logElementEvent("✔️ FINISHED", document.documentElement);
155 };
156
157 var ll = new LazyLoad({
158 elements_selector: ".lazy",
159 // Assign the callbacks defined above
160 callback_enter: callback_enter,
161 callback_exit: callback_exit,
162 callback_reveal: callback_reveal,
163 callback_loaded: callback_loaded,
164 callback_error: callback_error,
165 callback_finish: callback_finish
166 });
167 })();
168 </script>
169 </body>
170 </html> 我的旨在学过的东西不再忘记（主要使用艾宾浩斯遗忘曲线算法及其它智能学习复习算法）的偏公益性质的完全免费的编程视频学习网站：
fanrenyi.com；有各种前端、后端、算法、大数据、人工智能等课程。
版权申明：欢迎转载，但请注明出处
一些博文中有一些参考内容因时间久远找不到来源了没有注明，如果侵权请联系我删除。
博主25岁，前端后端算法大数据人工智能都有兴趣。
大家有啥都可以加博主联系方式（qq404006308，微信fan404006308）互相交流。工作、生活、心境，可以互相启迪。
聊技术，交朋友，修心境，qq404006308，微信fan404006308
26岁，真心找女朋友，非诚勿扰，微信fan404006308，qq404006308
人工智能群：939687837
作者相关推荐
感悟总结
其它重要感悟总结
感悟总结200813
最近心境200830
最近心境201019
201218-210205