Lazyr.js 轻量级的图片延时加载插件

发布于 2019-11-05 19:46:31 字数 10544 浏览 1841 评论 0

Lazyr.js 是一个轻量级、响应迅速 JavaScript 图片延迟加载库,并且不依赖任何第三方的插件和库,通过只显示用户能看到的图片,节省服务器开销,快速的响应用户请求的内容,提高网站的用户体验。

Install

Layzr was developed with a modern JavaScript workflow in mind. Though not required, it's convenient to have a build system in place that can transpile ES6, and bundle modules. For a minimal boilerplate that does so, try outset.

Choose an installation option based on your workflow:

  • npm
  • CDN
  • Download
  • Framework Bridge

Refer to the releases page for version specific information.

npm

Install Layzr, and add it to your package.json dependencies.

$ npm install layzr.js --save

Then import it into the file where you'll use it.

import Layzr from 'layzr.js'

CDN

Copy and paste one of the following <script> tags. Note the version number in the src attributes.

jsDelivr

<script src="https://cdn.jsdelivr.net/layzr.js/2.0.2/layzr.min.js"></script>

cdnjs

<script src="https://cdnjs.cloudflare.com/ajax/libs/layzr.js/2.0.2/layzr.min.js"></script>

Download

Download the latest version, and load the script in the dist folder.

<script src="layzr.min.js"></script>

Framework Bridge

Thank you to the community members who created these framework bridges!

Setup Images

Layzr intelligently chooses the best image source available based on an image's data attributes and browser feature detection.

  • In browsers that support srcset, if available, it will be used to determine the source.
  • In browsers that don't, the normal or retina source will be chosen based on the devicePixelRatio and availability.

Note that all attribute names are configurable via the options passed to Layzr. To indicate potential sources, add the following attributes to your images:

NameRequiredOptional
data-normal
data-retina
data-srcset

data-normal

Put the normal resolution source in the data-normal attribute.

<img data-normal="normal.jpg">

Note that Layzr selects elements using this attribute. Elements without it won't be tracked, and will never load.

data-retina

Add the retina/high resolution source in the data-retina attribute.

<img data-normal="normal.jpg" data-retina="retina.jpg">

data-srcset

Add the source set in the data-srcset attribute. For information on the proper syntax, read the official specification.

<img data-normal="normal.jpg" data-retina="retina.jpg" data-srcset="small.jpg 320w, medium.jpg 768w, large.jpg 1024w">

Instantiate

Create an instance, optionally passing in your options.

Be sure to assign your Layzr instance to a variable. Using your instance, you can:

  • start and stop the event listeners
  • add and remove event handlers
  • accommodate dynamically added elements
// using the default options

const instance = Layzr()

// using custom options

const instance = Layzr({
  // ...
})

Options are explained in the following section.

Options

Default options are shown below, and an explanation of each follows:

const instance = Layzr({
  normal: 'data-normal',
  retina: 'data-retina',
  srcset: 'data-srcset',
  threshold: 0
})

normal

Customize the attribute the normal resolution source is taken from.

const instance = Layzr({
  normal: 'data-normal'
})

retina

Customize the attribute the retina/high resolution source is taken from.

const instance = Layzr({
  retina: 'data-retina'
})

srcset

Customize the attribute the source set is taken from.

const instance = Layzr({
  srcset: 'data-srcset'
})

threshold

Adjust when images load, relative to the viewport. Positive values make images load sooner, negative values make images load later.

Threshold is a percentage of the viewport height, identical to the CSS vh unit.

const instance = Layzr({
  threshold: 0
})

Events

Layzr instances are extended with Knot.js, a browser-based event emitter. Use the event emitter syntax to add and remove handlers. Review the emitter syntax here.

Layzr emits the following events:

src:before

This event is emitted immediately before an image source is set. The image node is passed to the event handler.

instance.on('src:before', (element) => {
  // 'this' is your Layzr instance
  // 'element' is the image node
  // ...
})

Load event handlers should be attached using this event. See the example, and note the caveats associated with image load events before proceeding.

src:after

This event is emitted immediately after an image source is set. The image node is passed to the event handler.

instance.on('src:after', (element) => {
  // 'this' is your Layzr instance
  // 'element' is the image node
  // ...
})

Note that the image is not necessarily done loading when this event fires.

API

All API methods are chainable, including those from the emitter.

.handlers(flag)

Add or remove the scroll and resize event handlers.

instance
  .handlers(true)       // 'true' adds them
  .handlers(false)      // 'false' removes them

.check()

Manually check if elements are in the viewport.

This method is called while the window is scrolled or resized.

instance.check()

.update()

Update the elements Layzr is checking.

instance.update()

Dynamically added elements should be handled using this method. See the example.

Browser Support

Layzr depends on the following browser APIs:

It supports the following natively:

  • Chrome 24+
  • Firefox 23+
  • Safari 6.1+
  • Opera 15+
  • Edge 12+
  • IE 10+
  • iOS Safari 7.1+
  • Android Browser 4.4+

To support older browsers, consider including polyfills/shims for the APIs listed above. There are no plans to include any in the library, in the interest of file size.

相关链接

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84960 人气
更多

推荐作者

沧笙踏歌

文章 0 评论 0

山田美奈子

文章 0 评论 0

佚名

文章 0 评论 0

岁月无声

文章 0 评论 0

暗藏城府

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文