Home  >  Article  >  Web Front-end  >  JS plug-in LazyImgv1.0 image lazy loading usage analysis

JS plug-in LazyImgv1.0 image lazy loading usage analysis

巴扎黑
巴扎黑Original
2017-09-05 10:26:401504browse

This article mainly introduces the usage of JS image delayed loading plug-in LazyImgv1.0, and analyzes the precautions and core operating skills of using the image delayed loading plug-in LazyImgv1.0 with examples. It also comes with demo source code for readers to download and refer to. Friends can refer to

. This article describes the usage of the JS image delay loading plug-in LazyImgv1.0. Share it with everyone for your reference, the details are as follows:

Note: LazyImg must define the lazy-data attribute, the attribute value is the image path of src

Introduce JS File:


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

Default: If any condition is met in IMG, the image will be loaded;

1. There is no class attribute
2. If there is a class attribute and the attribute does not contain the css style name prefixed with "lazy-"

How to prohibit loading images by default

JS code:


LzDefault.action = false;

How to display images when clicking on event

JS code:


LazyImg.lazy("lazy-name");


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

The name in "lazy-name" can be customized, "lazy-" is the prefix and must exist

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>

The above is the detailed content of JS plug-in LazyImgv1.0 image lazy loading usage analysis. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn