Home >Web Front-end >JS Tutorial >Lazy Load jQuery plug-in Chinese usage documentation for delayed loading of images_jquery

Lazy Load jQuery plug-in Chinese usage documentation for delayed loading of images_jquery

WBOYOriginal: 2016-05-16 17:48:591094browse

What is LazyLoad technology?

When there are many pictures on the page, opening a page will inevitably cause a large amount of data interaction with the server. Especially for high-definition pictures, they occupy hundreds of K of space. Lazy Load is a jQuery plug-in written in JavaScript. It can delay loading of images on long pages. Images outside the browser's visible area will not be loaded until the user scrolls the page to where they are. This is similar to images Preloading is handled exactly the opposite way.
Lazy loading of images on long pages that contain many large images can speed up page loading. The browser will enter the ready state after loading visible images. In some cases, it can also help reduce server load, which will inevitably cause Qualitative improvement in speed.
Compatible with: ie6/7/8, firefox 3.5.5, opera 10.10, safari 4.0.4, chrome 3.0. Some functions of safari and chrome are not supported.

Lazy Load is inspired by the YUI ImageLoader toolbox made by Matt Mlinac. This is the demo page.

The link to the original text is: http://www.appelsiini.net/projects/lazyload

The current version of Lazy Load is 1.8.1

Download address: http://www.jb51.net/jiaoben/63757.html

Instance download:

Download statement:
1. Note: This code is for learning and communication only, please do not use it for commercial purposes.
2. Note: This code is for learning and communication only, please do not use it for commercial purposes.
File information: File name: Lazy Load lazy loading image example
File Hash: dd3e435124e377c2da33344d442f85d1
File size: 1.1 MB
File upload date: March 25, 2012
File update date: March 25, 2012
File description: When there are many pictures on the page, opening a page will inevitably cause a large amount of data interaction with the server. Especially for high-definition pictures, they occupy hundreds of K of space. Lazy Load is a jQuery plug-in written in JavaScript. It can delay loading of images on long pages. Images outside the browser's visible area will not be loaded until the user scrolls the page to where they are. This is similar to images Preloading is handled exactly the opposite way.

How to use? Let’s get to the point.

Lazy Load depends on jQuery. Please add the following code to the page head area:

Copy code The code is as follows:

Usage of Lazy Load The method is very simple, but the new version has made some adjustments, and the attributes of the tag must be modified. Change the src attribute in the tag to the URL of the waiting image, and fill in the data-original attribute with the real image URL.
is as follows:

Copy code The code is as follows:

Suggestion: For the waiting image in src, it is best to use a 1-pixel monochrome image.
The JS code is as follows:

Copy code The code is as follows:

$("img. lazy").lazyload();

In this way, the effect of Lazy Load can be achieved. Demo

After watching the Demo, do you feel that there is no effect? This problem will be in Mentioned later.

In fact, it is not necessary to use the data-original attribute specified by it to store the image URL. You can also customize other attribute names yourself, as follows:

The JS code is as follows:

Copy code The code is as follows:

$("img.lazy").lazyload({ data_attribute : "attr" }) ;

Just set the data_attribute attribute to the corresponding name. (Note: HTML code is not case sensitive! So "data-" can only be followed by lowercase letters or numbers.)

For Browsers that do not support JavaScript should have corresponding downgrade processing.

can use the

tag. <br><br><div class="codetitle"> <span><a style="CURSOR: pointer" data="3317" class="copybut" id="copybut3317" onclick="doCopy('code3317')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code3317"> <br><img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width=" 640" high="480"> <br><noscript><img src="img/example.jpg" width="640" high="480">

CSS style settings:

Copy code The code is as follows:

 
.lazy { 
display: none; 
} 

JS code:

Copy Code The code is as follows:

$("img.lazy").show().lazyload();

Set image Loading response distance
The default setting of the Lazy Load plug-in is: when the image appears on the browser window, loading will be triggered. However, by setting the value of the threshold attribute, the pre-loading position/distance of the image can be adjusted.

Copy code The code is as follows:

$("img.lazy").lazyload({ threshold : 200 });

In addition, threshold can be a positive or negative number. Positive numbers are preloaded. Assuming the value is 200, when the image is 200px away from appearing on the screen, Start loading. If it is a negative number, the opposite is true. Assume that when the value is -200, the image has appeared in the window and the distance from the bottom of the browser window is 200px before loading begins.
PS: The distance between the image and the screen It is calculated based on the top position of the image.
Note: The setting of threshold needs to consider the length of the website and the height of the image. If the value is too large, it will cause the problem of being unable to load. It is recommended that the value setting should not exceed half of the height of the corresponding image.

Trigger loading through events
You can trigger loading through events defined by jQuery, or you can use your own events.

Copy code The code is as follows:

 
$("img.lazy").lazyload({ 
event : "click" 
}); 
 

Achieve animation effect
The reason why the above Demo does not have the effect of image loading is because the default image loading of Lazy Load is displayed through jQuery's show() method, so the image appears almost instantly. .Of course we can also achieve other effects.

Copy code The code is as follows:

 
 $("img.lazy").lazyload({ 
effect : "fadeIn" 
}); 

You can also use the slideDown() method, but the effect is not Good.

If you want to control the speed of animation, you can also modify the effectspeed attribute.

Copy the code The code is as follows :

 
$("img.lazy").lazyload({ 
effect : "fadeIn", 
effectspeed : 1000 
}); 

The effectspeed attribute is empty by default, so if you don’t set it, the animation time is 400 milliseconds.
Container container attribute
When the images to be delayed loaded are all placed in a container. Just point the container attribute to The object of the container where img is placed.
css code:

Copy code The code is as follows:

 
#container { 
height: 600px; 
overflow: scroll; 
} 

js code:

Copy code The code is as follows:

 
$("img.lazy").lazyload({ 
container: $("# container") 
}); 

Without further ado, let’s just look at the Demo, not only vertical but also horizontal demo.

Attribute of failure_limit
Lazy Load has a mechanism to loop through img. According to HTML The layout of the document is searched from top to bottom. When the first img that is not displayed/loaded is found, the search will stop. (In fact, it is a sequential search of the object (group) $("img.lazy") )

What is the use of this failure_limit attribute?

Nowadays, when designing websites, a large number of positioning styles are used, such as: float and position, so that the layout effect presented in the browser It is very different from the DOM order in the HTML document.
There will be a situation where an tag has appeared on the screen, but it cannot be displayed!! Because it is actually in the HTML document The position is ranked behind those tags that have not yet been displayed. This will cause the tag displayed on the screen to be unable to load the corresponding image. When Lazy Load finds the first undisplayed
So at this time, you can use the failure_limit attribute.

Copy code The code is as follows:

 
$("img.lazy").lazyload({ 
failure_limit : 10 
}); 

In this way, Lazy Load will find the 10th undisplayed tag. When it is a page with many pictures and a complex layout, failure_limit is very useful.
The original text also has a warm reminder: If you have a funky layout set this number to something high. If your website layout is very "abnormal", it is recommended to adjust the value higher.

Delayed downloading of images
You can use custom events, Then set the delay to trigger the event through setTimeout.

Copy code The code is as follows:

 
$( function() { 
$("img:below-the-fold").lazyload({ 
event : "sporty" 
}); 
}); 

$ (window).bind("load", function() { 
var timeout = setTimeout(function() {$("img.lazy").trigger("sporty")},5000); 
} ); 

The main principle is that when the event is set to an event other than scroll, it will actually be bound to a built-in "appear" event. As the name suggests, this event is used to display images. . (In fact, scroll also calls this event)

skip_invisible loads invisible images
The Lazy Load plug-in does not load hidden images by default (for example, display:none). This helps optimize performance. If you want to load the hidden images together, you can set skip_invisible to false.

Copy the code The code is as follows:

 
$("img.lazy").lazyload({ 
skip_invisible : false 
}); 

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Summary of multiple methods to delete string spaces in javascript_javascript skillsNext article：Summary of multiple methods to delete string spaces in javascript_javascript skills

Related articles

See more