2021年还在用jquery吗,JQuery之图片懒加载

由于现在很多的网站都带有大量的图片，而图片的加载又会特别的慢，特别是在移动端，懒加载就显的特别重要了，说白了就是按需加载，用户要看到哪里就显示哪里，下面来记录一下懒加载的基本实现步骤！

1.引入jquery.js与jquery.lazyload.js，由于jquery.lazyload.js依赖于jquery，所以必须要引入jquery

  

   

    

     

    
    

     

      <script type="text/javascript" src="jquery.js">
      </script>
     
    
   

    

     

    
    

     

      <script type="text/javascript" src="jquery.lazyload.js">
      </script>
     
    
  

2.配置lazyload，比如加载效果、没有加载时显示的默认图片等等，可以简单的封装一个方法，方便去调用．

  

   

    

     

    
    

     

      function lazy(className) {
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      　　$(className).lazyload({
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
       
      //图片显示时淡入效果
     
    
   

    

     

    
    

     

      　　　　
      effect: 
      "fadeIn",
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
       
      //没有加载图片时的临时占位符
     
    
   

    

     

    
    

     

      　　　　
      placeholder: 
      "images/default.png",
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
       
      //图片在距离屏幕 200 像素时提前加载.
     
    
   

    

     

    
    

     

      　　　　
      threshold: 
      200,
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      　　　　
      //将图片加载放进click事件中（不常用）
     
    
   

    

     

    
    

     

      　　　　
      event:
      "click",
     
    
   

    

     

    
    

     

      　
     
    
   

    

     

    
    

     

      　　　　
      //加载隐藏的图片（不常用）
     
    
   

    

     

    
    

     

      　　　　
      skip_invisible : 
      false
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
        
     
    
   

    

     

    
    

     

      　　　　
      //其他配置项请查看官网
     
    
   

    

     

    
    

     

      　　});
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      }
     
    
  

3.调用懒加载，在动态加载img时添加class="lazy"，并配置自定义属性data-original="请求的图片地址"，方便与插件绑定，并定义图片的宽高，图片的宽和高可以写在class里

  

   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      <img 
      class=
      "lazy" alt=
      ""  data-original=
      "后台请求的图片地址" width=
      "640" height=
      "480" />
     
    
   

    

     

    
    

     
 
     
    
  

在请求完图片数据循环完成时调用lazy方法

  

   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      lazy(
      'img.
      lazy');