>  기사  >  웹 프론트엔드  >  JS 플러그인 LazyImgv1.0 이미지 지연 로딩 사용 분석

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

巴扎黑
巴扎黑원래의
2017-09-05 10:26:401516검색

이 글에서는 주로 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:




 
  LazyImgv1.0图片延迟加载插件
  
  
  
 
 
  

LazyImgv1.0图片延迟加载插件

注: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. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9

默认加载了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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.