JS プラグイン LazyImgv1.0 画像の遅延読み込みの使用状況分析

この記事では、主に JS 画像遅延読み込みプラグイン LazyImgv1.0 の使用方法を紹介し、画像遅延読み込みプラグイン LazyImgv1.0 を使用する際の注意事項と核となる操作スキルをサンプルの形式で分析します。また、デモも付属しています。ソース コードを読者が参照用にダウンロードできるようにします。必要な友人はこの記事を参照してください

この記事の例では、JS 画像遅延読み込みプラグイン LazyImgv1.0 の使用方法について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

注: LazyImg は Lazy-data 属性を定義する必要があります。属性値は src のイメージ パスです

JS ファイルを導入します:

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

デフォルトでは、IMG でいずれかの条件が満たされた場合、画像がロードされます。

1. クラス属性があり、その属性にプレフィックスが付けられた CSS スタイル名が含まれていない場合。 「lazy-」で

画像のデフォルト読み込みを防ぐ方法

JSコード:

LzDefault.action = false;

イベントをクリックしたときに画像を表示する方法

JSコード:

LazyImg.lazy("lazy-name");

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

名前"lazy-name" はカスタマイズできます。"lazy-" はプレフィックスが存在する必要があります

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>
 

以上がJS プラグイン LazyImgv1.0 画像の遅延読み込みの使用状況分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。