JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】


Posted in Javascript onSeptember 04, 2017

本文实例讲述了JS图片延迟加载插件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-"是前缀必须存在

DEMO:

<!DOCTYPE html>
<html>
 <head>
  <title>LazyImgv1.0图片延迟加载插件</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="css/main.css" rel="external nofollow" type="text/css"/>
  <script type="text/javascript" src="js/lazyImg.v1.0.min.js"></script>
 </head>
 <body>
  <h1 class="tit auto"><img src="images/default.png" lazy-data="images/tit.png" width="460" height="160" alt="LazyImgv1.0图片延迟加载插件" /></h1>
  <div class="lz_box auto">
   <p>
    <em class="red fb">注:</em>LazyImg 必须定义lazy-data属性,属性值是src的图片路径
   </p>
   <p>
    <em class="red fb">引入JS文件:</em><script type="text/javascript" src="js/lazyImg.v1.0.js"></script>
   </p>
   <p>
    <em class="fb">下载地址:</em>
    <a class="red" href="js/lazyImg.v1.0.js" rel="external nofollow" target="_blank">点击它!</a>
    <a class="red" href="js/lazyImg.v1.0.min.js" rel="external nofollow" target="_blank">点击它(压缩版)!</a>
   </p>
  </div>
  <div class="lz_box auto">
   <p>
    默认情况下: 在IMG中满足以任何一个条件,都会加载图片;
   </p>
   <p>
    1、没有class属性
   </p>
   <p>
    2、如果有class属性并且属性中不包含以"lazy-"为前缀的css样式名
   </p>
  </div>
  <div class="lz_box auto">
   <p>
   如何禁止默认加载图片
   </p>
   <p>
    <em class="red fb">JS代码: </em>LzDefault.action = false;
   </p>
  </div>
  <div class="lz_box auto">
   <p>
   如何在点击事件时显示图片
   </p>
   <p>
    <em class="red fb">JS代码: </em>LazyImg.lazy("lazy-name");
   </p>
   <p>
    <img class="lazy-name" lazy-data="图片路径"/>
   </p>
   <p>
    <em class="red fb">"lazy-name" </em>中的name是可以自定义,"lazy-"是前缀必须存在
   </p>
  </div>
  <ol class="list auto">
   <li class="fore1"><img src="images/default.png" lazy-data="images/1.png" width="161" height="161" alt="1"/></li>
   <li class="fore2"><img src="images/default.png" lazy-data="images/2.png" width="161" height="161" alt="2"/></li>
   <li class="fore3"><img src="images/default.png" lazy-data="images/3.png" width="161" height="161" alt="3"/></li>
   <li class="fore4"><img class="lazy-456" src="images/default.png" lazy-data="images/4.png" width="161" height="161" alt="4"/></li>
   <li class="fore5"><img class="lazy-456" src="images/default.png" lazy-data="images/5.png" width="161" height="161" alt="5"/></li>
   <li class="fore6"><img class="lazy-456" src="images/default.png" lazy-data="images/6.png" width="161" height="161" alt="6"/></li>
   <li class="fore7"><img src="images/default.png" lazy-data="images/7.png" width="161" height="161" alt="7"/></li>
   <li class="fore8"><img src="images/default.png" lazy-data="images/8.png" width="161" height="161" alt="8"/></li>
   <li class="fore9"><img src="images/default.png" lazy-data="images/9.png" width="161" height="161" alt="9"/></li>
  </ol>
  <div class="lz_box auto">
   <p>
   默认加载了1、2、3、7、8、9图片,当点击下面的按钮时会加载 4、5、6图片
   </p>
   <p>
    <img class="click_img" onclick="showImg()" src="images/default.png" lazy-data="images/click.png" width="184" height="48" />
   </p>
  </div>
  <div class="white_div"></div>
  <script>
  var showImg = function() {
   LazyImg.lazy("lazy-456");
  }
  // 以下定义默认不执行延迟加载
  // LzDefault.action = false;
 </script>
 </body>
</html>

附:完整实例代码点击此处本站下载

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript异步编程:异步数据收集的具体方法
Aug 19 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
Nov 14 Javascript
JavaScript实现弹出子窗口并传值给父窗口
Dec 18 Javascript
Express的路由详解
Dec 10 Javascript
基于javascript实现按圆形排列DIV元素(一)
Dec 02 Javascript
JS实现数组的增删改查操作示例
Aug 29 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
Jan 08 Javascript
Vue项目路由刷新的实现代码
Apr 17 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
Nov 09 Javascript
vue $set 给数据赋值的实例
Nov 09 Javascript
JS如何把字符串转换成json
Feb 21 Javascript
0基础学习前端开发的一些建议
Jul 14 Javascript
React教程之Props验证的具体用法(Props Validation)
Sep 04 #Javascript
VueJS组件之间通过props交互及验证的方式
Sep 04 #Javascript
vue中component组件的props使用详解
Sep 04 #Javascript
React-Native中props具体使用详解
Sep 04 #Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
Sep 04 #Javascript
JS与HTML结合实现流程进度展示条思路详解
Sep 03 #Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
Sep 03 #Javascript
You might like
php中取得文件的后缀名?
2012/02/20 PHP
php实现查询百度google收录情况(示例代码)
2013/08/02 PHP
php实现计数器方法小结
2015/01/05 PHP
PHP lcfirst()函数定义与用法
2019/03/08 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
使用Modello编写JavaScript类
2006/12/22 Javascript
JavaScript 在线压缩和格式化收藏
2009/01/16 Javascript
基于Jquery的仿照flash放大图片效果代码
2011/03/16 Javascript
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
jquery插件jSignature实现手动签名
2015/05/04 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
2016/04/18 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
jQuery实现文档树效果
2017/02/20 Javascript
javascript实现循环广告条效果
2017/12/12 Javascript
ajax请求+vue.js渲染+页面加载的示例
2018/02/11 Javascript
浅谈vue中.vue文件解析流程
2018/04/24 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
2019/02/27 Javascript
jquery中attr、prop、data区别与用法分析
2019/09/25 jQuery
JavaScript实现留言板案例
2020/03/17 Javascript
解决vue项目中出现Invalid Host header的问题
2020/11/17 Javascript
[02:16]卖萌的僵尸 DOTA2神话信使飞僵小宝来袭
2014/03/24 DOTA
详解Python异常处理中的Finally else的功能
2017/12/29 Python
TensorFlow模型保存/载入的两种方法
2018/03/08 Python
Python 中Django安装和使用教程详解
2019/07/03 Python
Python实现二叉搜索树BST的方法示例
2019/07/30 Python
Django项目之Elasticsearch搜索引擎的实例
2019/08/21 Python
Python try except else使用详解
2021/01/12 Python
珍珠奶茶店创业计划书
2014/01/11 职场文书
校园安全广播稿
2014/02/08 职场文书
大学生社会实践方案
2014/05/11 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
2014年质检员工作总结
2014/11/18 职场文书
离婚被告代理词
2015/05/23 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书
如何解决php-fpm启动不了问题
2021/11/17 PHP
微软Win11 全新照片应用面向 Dev预览版推出 新版本上手体验图集
2022/09/23 数码科技