js插件---图片懒加载lazyload

时间：2022-03-28 19:05:12

js插件---图片懒加载lazyload

一、总结

一句话总结：使用异常简单，src里面放加载的图片，data-original里面放原图片，不懂的位置去官网或者github找API就好。

1、lazyload官网的API演示怎么找到？

跟着github上面的网址一级一级的摸上去的，github上面显示的资料有限

官网地址：Lazyload Images After Five Second Delay
https://appelsiini.net/projects/lazyload/timeout/

js插件---图片懒加载lazyload

js插件---图片懒加载lazyload

2、延时加载怎么实现？

直接放到window的load方法里面等5s就好，

 window.addEventListener("load", function(event) {

     let timeout = setTimeout(function() {

         $("img.lazy").lazyload({

             effect : 'fadeIn',

             event : 'sporty'

         });

     }, 5000);

 });
$("img.lazy").lazyload()

这句话是正常的运行懒加载

二、图片懒加载lazyload

百度盘下载地址：

链接：https://pan.baidu.com/s/1MVLxVWgTAyke1smT0kVacQ 密码：ikn4

1、截图

js插件---图片懒加载lazyload

 

2、代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <script src="jquery.min.js"></script>

     <script src="amazeui.lazyload.js"></script>

     <style>

         .lazy {

          margin: 10px auto;

          background: url(docs/img/loading.gif) no-repeat center center;

         }

     </style>

 </head>

 <body>

     <img class="lazy" src="docs/img/loading.gif" data-original="docs/img/bmw_m1_hood.jpg" width="640" height="480">

     <div id="container">

       <button type="button" class="am-btn am-btn-danger">点击载入图片</button>

     </div>

     <div class="lazy" data-original="docs/img/bmw_m1_hood.jpg" style="width: 765px; height: 574px;"></div>

 </body>

 <script>

 window.addEventListener("load", function(event) {

     let timeout = setTimeout(function() {

         $("img.lazy").lazyload({

             effect : 'fadeIn',

             event : 'sporty'

         });

     }, 5000);

 });

 $('#container').one('click', function() {

   $('#container').load('test.html', function(response, status, xhr) {

     $('img.lazy').lazyload();

   });

 });

 $('div.lazy').lazyload({

   effect : 'fadeIn'

 });

 </script>

 </html>
 

相关文章