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版本的代码
Sep 03 Javascript
基于jquery实现的文字淡入淡出效果
Nov 14 Javascript
手机平板等移动端适配跳转URL的js代码
Jan 25 Javascript
直接在JS里创建JSON数据然后遍历使用
Jul 25 Javascript
jQuery实现无限往下滚动效果代码
Apr 16 Javascript
js倒计时简单实现代码
Aug 11 Javascript
分享一道关于闭包、bind和this的面试题
Feb 20 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
Mar 01 Javascript
vue组件Prop传递数据的实现示例
Aug 17 Javascript
js的对象与函数详解
Jan 21 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
Mar 08 Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 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桌面中心(一) 创建数据库
2007/03/11 PHP
thinkPHP的Html模板标签使用方法
2012/11/13 PHP
php抽象类用法实例分析
2015/07/07 PHP
PHP加密解密函数详解
2015/10/28 PHP
反射调用private方法实践(php、java)
2015/12/21 PHP
php中类和对象:静态属性、静态方法
2017/04/09 PHP
ThinkPHP框架实现定时执行任务的两种方法分析
2018/09/04 PHP
javascript 处理事件绑定的一些兼容写法
2009/12/24 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
2014/02/04 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
2014/10/17 Javascript
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
Juery解决tablesorter中文排序和字符范围的方法
2015/05/06 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
2016/09/04 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
ES6新特性之字符串的扩展实例分析
2017/04/01 Javascript
vue页面切换项目实现转场动画的方法
2019/11/12 Javascript
小程序实现长按保存图片的方法
2019/12/31 Javascript
python实现提取百度搜索结果的方法
2015/05/19 Python
itchat和matplotlib的结合使用爬取微信信息的实例
2017/08/25 Python
LRUCache的实现原理及利用python实现的方法
2017/11/21 Python
python实现推箱子游戏
2020/03/25 Python
Python3.5 Json与pickle实现数据序列化与反序列化操作示例
2019/04/29 Python
Python的对象传递与Copy函数使用详解
2019/12/26 Python
Macbook安装Python最新版本、GUI开发环境、图像处理、视频处理环境详解
2020/02/17 Python
python属于解释语言吗
2020/06/11 Python
基于Pytorch版yolov5的滑块验证码破解思路详解
2021/02/25 Python
idealfit英国:世界领先的女性健身用品和运动衣物品牌
2017/11/25 全球购物
Traffic People官网:女式花裙、上衣和连身裤
2020/10/12 全球购物
学校岗位设置方案
2014/01/16 职场文书
关于运动会广播稿50字
2014/10/18 职场文书
学生评语集锦
2015/01/04 职场文书
争先创优个人总结
2015/03/04 职场文书
中学感恩教育活动总结
2015/05/05 职场文书
2015年中秋晚会主持词
2015/07/01 职场文书
PostgreSQL数据库创建并使用视图以及子查询
2022/04/11 PostgreSQL