Cet article présente principalement l'utilisation du plug-in de chargement différé d'image JS LazyImgv1.0 et analyse les précautions et les compétences opérationnelles de base liées à l'utilisation du plug-in de chargement différé d'image LazyImgv1.0 avec des exemples. Il est également livré avec une source de démonstration. code que les lecteurs peuvent télécharger et consulter. Les amis peuvent se référer à

Cet article explique l'utilisation du plug-in de chargement différé d'image JS LazyImgv1.0. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Remarque : LazyImg doit définir l'attribut lazy-data, la valeur de l'attribut est le chemin de l'image de src

Introduire le fichier JS :

<script type="text/javascript" src="js/lazyImg.v1.0.js"></script>

Par défaut : si une condition est remplie dans IMG, l'image sera chargée

1. Aucun attribut de classe
2. S'il existe un attribut de classe et que l'attribut ne contient pas le nom du style CSS préfixé par "lazy-"

Comment interdire le chargement des images par défaut

Code JS :

LzDefault.action = false;

Comment afficher l'image lorsque vous cliquez sur un événement

Code JS :

LazyImg.lazy("lazy-name");

<img class="lazy-name" lazy-data="图片路径"/>

Le nom dans "lazy-name" peut être personnalisé, "lazy-" est le préfixe et doit exister

DEMO :

 
  
  
  
  
 

 
  

  

   

    注：LazyImg 必须定义lazy-data属性，属性值是src的图片路径
   
   

    引入JS文件：<script type="text/javascript" src="js/lazyImg.v1.0.js"></script>
   
   

    下载地址：
    点击它！
    点击它(压缩版)！
   
  

  

   

    默认情况下: 在IMG中满足以任何一个条件，都会加载图片；
   
   

    1、没有class属性
   
   

    2、如果有class属性并且属性中不包含以"lazy-"为前缀的css样式名
   
  

  

   

   如何禁止默认加载图片
   
   

    JS代码: LzDefault.action = false;
   
  

  

   

   如何在点击事件时显示图片
   
   

    JS代码: LazyImg.lazy("lazy-name");
   
   

    <img class="lazy-name" lazy-data="图片路径"/>
   
   

    "lazy-name" 中的name是可以自定义，"lazy-"是前缀必须存在
   
  

  

   

   

   

   

   

   

   

   

   

  
  

   

   默认加载了1、2、3、7、8、9图片，当点击下面的按钮时会加载 4、5、6图片
   
   

    
   
  

  

  <script>
  var showImg = function() {
   LazyImg.lazy("lazy-456");
  }
  // 以下定义默认不执行延迟加载
  // LzDefault.action = false;
 </script>
 

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!