Layzr.js How to use the new version

Reprint please specify the source:
Http://www.cnblogs.com/fiter/p/5413919.html

Objective

Today research this JS library, I novice, will be the official JS code download down always can not normal use, after many attempts, finally found a can use the new version of Code, here to share Https://github.com/xibudu/layzr

Directory

1. LAYZR Introduction
2. Basic use of LAYZR
3. LAYZR precautions

1. Layzr Introduction

Layzr.js is a small, fast, and non-dependent library for browser picture lazy loading.

We found Layzr.js official GitHub above, and the Dist catalog released layzr.min.js only 4 KB. At the same time, found Package.json files, without any dependencies dependencies.

It is very convenient to use layzr.js to delay the loading of pictures. Maximum loading speed is achieved by configuring the options. Layzr.js for scrolling events has been shaken to minimize the pressure on the browser to ensure optimal rendering.

Project official website: http://callmecavs.com/layzr.js/

2. Basic use of LAYZR

In HTML, the image is controlled with an IMG tag, to use the Layzr.js library, to add attributes to the IMG tag, and to introduce the Layzr.js library, without having to create the object again.

• SRC: Used to define image placeholders, and if no image placeholders are defined, an exception may be displayed before the image is loaded.
• Data-normal: Image for display
• Data-retina: Used to display lazy loading of retina screen images.
• Data-srcset: See the srcset properties https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img

3. LAYZR's Precautions

Layzr listens for scrolling events, so it is necessary to put the deferred image on the page that needs to be scrolled before it is loaded, otherwise the picture will not be displayed.

Reprint please specify the source:
Http://www.cnblogs.com/fiter/p/5413919.html

Layzr.js How to use the new version