이 글에서는 주로 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图片延迟加载插件
注: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 중국어 웹사이트의 기타 관련 기사를 참조하세요!