Shulou(Shulou.com)06/03 Report--

Today, I will talk to you about how JavaScript picture delay loading micro library Echo.js is, many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

Echo.js is a standard independent Javascript image lazy loading (delayed loading) library, it is very small and fast, only 2KB, it uses the data-* property of HTML5, delayed request to load image resources, does not rely on any third-party plug-in library, especially suitable for mobile applications that need to load a large number of pictures.

How to use

1. Introduce the file

2. HTML structure

Blank.gif is a 1 x 1 image, which is used as the default image, and the property value of data-echo is the real address of the picture. You can set the width and height of the image, or set it in CSS, otherwise the image that seems to be at the bottom and bottom will be delayed to load.

3 、 JavaScript

Echo.init ({offset: 100,250, unload: false, callback: function (element, op) {console.log ('loaded ok.');}})

Description of common parameters and methods

Parameter description default value

How many pixels of offset from the visual area of the picture can be loaded 0throttle picture delay how many milliseconds load 250debounce anti-dithering trueunload tells echo whether to load or unload the picture in the view, when the picture leaves the view area, triggers the falsecallback callback function to detect whether the picture is loaded with function ()

Finally, echo.js also provides a .render () method, which is used as follows:

Echo.render ()

Application scenario: when your page does not scroll, and you want to load the picture to be displayed, such as picture rotation, when the first picture is displayed, and then slide to show the second picture, this time use echo.render (); load the second picture in advance, there will be no picture loading Catton white screen and other phenomena.

After reading the above, do you have any further understanding of the delayed loading of JavaScript image micro library Echo.js? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.