微信扫一扫打赏支持

js插件---延迟加载库lazy load

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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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>

 

 

 

 

 

 

 

 

 

 

 
posted @ 2020-03-23 14:57  范仁义  阅读(630)  评论(0)    收藏  举报