layzr.js新版使用方法

转载请注明出处：
http://www.cnblogs.com/fiter/p/5413919.html

前言

今天研究这个JS库，本人新手，将官方的js代码下载下来后始终无法正常使用，经过多番尝试，终于找到一个可以用的新版代码，在这里分享https://github.com/xibudu/layzr

目录

  1. layzr介绍
  2. layzr的基本使用
  3. Layzr的注意事项

1. layzr介绍

layzr.js 是一个很小、速度快、无依赖的，用于浏览器图片延迟加载的库。

我们找到Layzr.js官方的Github上面，dist目录发布的 layzr.min.js 仅有 4 KB。同时，发现 package.json 文件，没有任何的dependencies依赖。

用layzr.js进行图片延迟加载，是非常方便的。通过配置选项，实现最大化的加载速度。layzr.js对于滚动事件已去抖，以尽量减少对浏览器的压力，以确保最佳的渲染。

项目官方网站：http://callmecavs.com/layzr.js/

2. layzr的基本使用

在HTML中，图片是用img标签在控制的，要用到Layzr.js库，需要在img标签中增加属性，同时引入Layzr.js库就可以了，不需要再创建对象

<img data-normal="http://callmecavs.com/layzr.js/images/demo/1.jpg" data-retina="http://callmecavs.com/layzr.js/images/demo/1-retina.jpg" data-srcset="http://callmecavs.com/layzr.js/images/demo/1.jpg 1x, http://callmecavs.com/layzr.js/images/demo/1-retina.jpg 2x">
  • src: 用于定义图像占位符，如果没有定义图像占位符，那么在图像载入前，可能会显示异常。
  • data-normal: 用于显示的图像
  • data-retina: 用于显示retina屏幕图像的延迟加载。
  • data-srcset: 参见<img>的srcset属性https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img

3. layzr的注意事项

layzr监听滚动事件，所以要把延迟显示的图片放到需要滚动的页面上图片才会被加载，否则图片将不会显示。

转载请注明出处：
http://www.cnblogs.com/fiter/p/5413919.html

时间： 2024-08-27 06:10:37

layzr.js新版使用方法的相关文章

JQuery缓冲加载图片插件lazyload.js的使用方法

lazyload.js是一个基于JQuery的插件,可以用来缓冲加载图片.如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动情况来加载你需要看的图片,然后它才会从后台请求下载图片,最后显示出来.通过这个插件,可以在需要显示图片的时候,才下载图片,从而可以减少服务器的压力,提高页面加载速度. Lazy Load 插件原理 修改目标img元素的src属性为orginal属性,从而中断图片的加载.检测滚动状态,然后把网页可视区

JQuery 加载 CSS、JS 文件的方法有哪些？

在进行web前端开发(http://www.maiziedu.com/course/web-px/)时,我们可能会需要使用JQuery加载一个外部的css文件或者js文件,加载外部文件的方法有多种,下面具体看看各种加载方法 JS 方式加载 CSS.JS 文件: //加载 css 文件function includeCss(filename) { var head = document.getElementsByTagName('head')[0]; var link = document.cre

js 变量提升+方法提升

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> var a = 100; function t() { alert(a); var a = 10; } t(); //输出结果为undefine

【js常用DOM方法】

介绍几个js DOM的常用方法 获取元素节点 getElementById  getElementsByTagName  getElementsByClassName 先写一个简单的网页做测试: /* test.html*/<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body&g

C#的WEBBROWSER与JS交互的方法（转载）

原地址:http://www.jb51.net/article/57574.htm 本文实例总结了C#的WEBBROWSER与JS交互的方法.分享给大家供大家参考.具体实现方法如下: 一.实现WebBrowser内部跳转,阻止默认打开IE 1.引用封装好的WebBrowserLinkSelf.dll实现 复制代码代码如下: public partial class MainWindow : Window{       private WebBrowser webBrowser = new Web

js中call方法的使用介绍

js call call 方法 请参阅 应用于:Function 对象 要求 版本 5.5 调用一个对象的一个方法,以另一个对象替换当前对象. call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 参数 thisObj 可选项.将被用作当前对象的对象. arg1, arg2, , argN 可选项.将被传递方法参数序列. 说明 call 方法可以用来代替另一个对象调用一个方法.call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对

今天和组内一起写代码时碰到了一个关于命名冲突的问题，最后用js命名空间的方法解决的。

//第一步,首先创建一个全局变量,可以放在自己的js方法库中方便以后用,这个就是用来注册命名空间的方法. ns = function(namespace){ var arr = namespace.split('.');  //将传入的字符串如"com.test.lzn"以'.'隔开做成一个数组 var strNamespace = ""; //这个是为了保存每一步循环进去的包名 for(var i=0;i<arr.length;i++) { if(i!=0)

js刷新页面方法大全

本文介绍下,用js刷新当前页面的几种方法,包括reload方法.replace方法.自动刷新方法等.有需要的朋友参考下吧 如何实现刷新当前页面呢?借助js你将无所不能. 1,reload 方法,该方法强迫浏览器刷新当前页面.语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页.true, 则以 GET 方式,从服务端取最新的页面, 相当于客户端点击 F5("刷新") 2,replace 方法

js正则验证方法大全

js正则验证方法大全 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83