JS 플러그인 LazyImgv1.0 이미지 지연 로딩 사용 분석

이 글에서는 주로 JS 이미지 지연 로딩 플러그인 LazyImgv1.0의 사용법을 소개하고, 이미지 지연 로딩 플러그인 LazyImgv1.0을 사용할 때 주의사항과 핵심 작동 기술을 예제 형식으로 분석합니다. 독자들이 참조할 수 있도록 소스 코드를 다운로드하세요. 필요한 친구는 이 기사를 참조할 수 있습니다.

이 기사의 예에서는 JS 이미지 지연 로딩 플러그인 LazyImgv1.0의 사용법을 설명합니다. 참조를 위해 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

참고: LazyImg는 지연 데이터 속성을 정의해야 하며, 속성 값은 src

JS 파일 소개:

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

기본적으로 IMG에서 조건이 충족되면 이미지가 로드됩니다.

1. 클래스 속성이 없고 속성에 CSS 스타일 이름이 붙지 않은 경우 with "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 중국어 웹사이트의 기타 관련 기사를 참조하세요!