[Reprint] Picture delay loading library LAYZR--NODEJS middleware Series

The zero-based NODEJS series article will show you how to benefit JavaScript as a server-side script through NODEJS Framework web development. The NODEJS framework is a V8-based engine and is the fastest JavaScript engine available today. The Chrome browser is based on V8, and opening 20-30 pages is a smooth one. The NODEJS Standard Web Development Framework Express helps us quickly build web sites that are more efficient than PHP and have a lower learning curve. Very suitable for small websites, personalization sites, our own Geek website!!

About the author

• Zhang Dan (Conan), entrepreneur, programmer (JAVA,R,JAVASCRIPT/NODEJS)
• Weibo: @Conan_Z
• Blog:http://blog.fens.me
• Email: [Email protected]

Reprint please specify the source:
http://blog.fens.me/nodejs-layzr/

Objective

Lazy loading technology is widely used in most Internet Web applications today. By delaying the loading of images, the images are loaded when the user's browsing area is close, which can effectively improve the speed of Web page opening and further improve the user's experience.

Layzr.js Library can complete this function, more than 150 lines of code, very small quickly very convenient.

Directory

1. LAYZR Introduction
2. Basic use of LAYZR
3. Configuration of the Layzr

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, the Dist catalog released layzr.min.js only 2.2 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.github.io/layzr.js/

2. Basic use of LAYZR

Layzr.js is a JavaScript library that runs on the browser side, but is used for NPM management and is not published in Bower. For an introduction to NPM and Bower, please review the article: quickly create a Nodejs library based on NPM, Bower to solve JS dependency management

Below we use NPM way, download Layzr library.

First, create the project directory.

~  

New NPM project file Package.json.

~ D:\workspace\javascript\js-layzr> vi package.json{    "name": "js-layzr",    "version": "0.0.1",    "description": "a demo for layzr",    "dependencies": {}}

Download the Layzr.js package via NPM

~ D:\workspace\javascript\js-layzr> npm install layzr.js --savenpm WARN package.json [email protected] No repository field.npm WARN package.json [email protected] No README data[email protected] node_modules\layzr.js

Next, we open the demo file provided by the Layzr.js project in layzr.js/demo.html.

<! DOCTYPE html><!--[if IE 9]> 

In the browse-type preview effect, as shown in.

On the left is the browser page, the elements interface for the Chrome developer tool on the right, and the red line for the display and the code. When the page scrolls down, the picture is loaded with one sheet. In the same code, the original code is

The part that will be re-translated into

From this demo, we can guess that the LAYZR library should have 2 components, listen for page events and update the DOM elements of the IMG tag.

3. Configuration options for Layzr

In HTML, the image is controlled with an IMG tag, and the Layzr.js library needs to be added to the IMG tag.

• SRC: Used to define image placeholders, and if no image placeholders are defined, an exception may be displayed before the image is loaded.
• DATA-LAYZR: Image for display
• Data-layzr-retina: For delayed loading of images, the test found no effect.
• DATA-LAYZR-BG: The image is used to make the background, and the test finds are hidden directly.

Correspondingly, we also need to define an instance of JavaScript to start LAYZR events.

var layzr = new Layzr({   selector: ‘[data-layzr]‘,   attr: ‘data-layzr‘,   retinaAttr: ‘data-layzr-retina‘,   bgAttr: ‘data-layzr-bg‘,   threshold: 0,   callback: null });

JavaScript Instance properties:

• Selector: Used to select an image label.
• attr: The attribute used to specify DATA-LAYZR
• Retinaattr: Used to specify the Data-layzr-retina property
• Bgattr: The attribute used to specify DATA-LAYZR-BG
• Threshold: Used to define image loading parameters, which can be controlled by screen height.
• CALLBACK: Triggers an event callback when loading is complete.

Next, we create a new layzr.html file to test LAYZR's library functions, which is easier to understand than the official demo.

New file layzr.html.

<! DOCTYPE html>

Using the browser to find the page, we can see the effect of the display.

When the browser slides down, the image is replaced by the original black bitmap, which will automatically replace the image we need to display.

This article tests the code that has been uploaded to Github:https://github.com/bsspirit/js-layzr

In this way, we implement the delayed loading technique of the image. For sites with a large number of images, the attempt to take a look at the lazy loading technology, will certainly give the site a significant performance improvement.

Reprint please specify the source:
http://blog.fens.me/nodejs-layzr/

[Reprint] Picture delay loading library LAYZR--NODEJS middleware Series