图片延迟加载库Layzr

js-layzr
前言

延迟加载技术,普遍应用于现在大部分的互联网的Web应用上。通过对图像的延迟加载,等到用户浏览区域接近时才把图片进行加载,可以有效地提升网页打开的速度,进一步改进用户的体验。

Layzr.js 是一个精小的、能快速加载图片的开发包。使用它的话,除非图片出现在视线中才会加载,否则是不会自动加载图片的。

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

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

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

项目官方网站:http://callmecavs.github.io/layzr.js/

在HTML中,图片是用img标签在控制的,要用到Layzr.js库,需要在img标签中增加属性。

img src=”optional/placeholder” data-layzr="normal/image" data-layzr-retina="optional/retina/image" 
div data-layzr-bg=“normal/image“
  1. src: 用于定义图像占位符,如果没有定义图像占位符,那么在图像载入前,可能会显示异常。
  2. data-layzr: 用于显示的图像
  3. data-layzr-retina: 用于图像的延迟加载。
  4. data-layzr-bg: 图像用于做成背景。

对应地,我们还需要定义Javascript的实例,用来启动layzr的事件。

// create new instance, defaults shown below
var layzr = new Layzr({
 selector: '[data-layzr]',
 attr: 'data-layzr',
 retinaAttr: 'data-layzr-retina',
 bgAttr: 'data-layzr-bg',
 threshold: 0,
 callback: null
});

Javascript实例属性:

  1. selector: 用于选定图像标签。
  2. attr: 用于指定data-layzr的属性
  3. retinaAttr: 用于指定data-layzr-retina属性
  4. bgAttr: 用于指定data-layzr-bg的属性
  5. threshold: 用于定义图像加载参数,通过屏幕高度来控制。
  6. callback: 当加载完成,触发事件回调。

接下来,我们新建一个layzr.html的文件,用于测试 layzr 的库各种功能,会比官方提供的Demo更易于理解。

demo: https://iicen.cn/i/layzr/demo.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注