Lazy Load: jQuery plug-in for delayed image loading

What is LazyLoad technology?

When there are many pages, opening a page will inevitably lead to interaction with the server with a large amount of data. Especially for high-definition images, it occupies several hundred KB of space. Lazy Load is a jQuery plug-in written in JavaScript. it delays loading images on long pages. images outside the visible area of the browser are not loaded until the user scrolls the page to their location. this is the opposite of the image pre-loading method.
Delayed loading of images on pages containing many large image titles can speed up page loading. the browser is ready after the visible image is loaded. in some cases, it can also help reduce the server load, which will inevitably lead to a qualitative increase in speed.
Compatible: ie6/7/8, firefox 3.5.5, opera 10.10, safari 4.0.4, chrome 3.0, some features of safari and chrome are not supported.

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

Original article links in: http://www.appelsiini.net/projects/lazyload


The Lazy Load version is 1.8.1.

: Http://www.jb51.net/jiaoben/63757.html

Download instance:

Download statement:
1. Note: This code is only for learning and communication. Do not use it for commercial purposes.
2. Note: This code is for learning and communication purposes only. Do not use it for commercial purposes.
File Information: File Name: Lazy Load delays loading image instances
File Hash: dd3e435124e377c2da33344d442f85d1
Size: 1.1 MB
File Upload Date: January 1, March 25, 2012
File updated on: July 15, March 25, 2012
File Description: when there are many pages, opening a page will inevitably lead to interaction with the server with a large amount of data. Especially for high-definition images, it occupies several hundred KB of space. Lazy Load is a jQuery plug-in written in JavaScript. it delays loading images on long pages. images outside the visible area of the browser are not loaded until the user scrolls the page to their location. this is the opposite of the image pre-loading method.

How to use it? Next, go to the topic.

Lazy Load depends on jQuery. Add the following code to the head area of the page:

Copy codeThe Code is as follows:
<Script src = "jquery. js" type = "text/javascript"> </script>
<Script src = "jquery. lazyload. js" type = "text/javascript"> </script>


Lazy Load is easy to use, but the new version has made some adjustments and must modify the attributes of the label. Change the src attribute in the label to the URL of the image waiting for, and enter the real image URL in the data-original attribute.
As follows:
Copy codeThe Code is as follows:


Suggestion: it is best to use a 1 pixel monochrome image for the waiting image in src.
The JS Code is as follows:
Copy codeThe Code is as follows:
$ ("Img. lazy"). lazyload ();

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

After watching the Demo, do you think it will be ineffective? This issue will be mentioned later.

In fact, it is not necessary to use the specified data-original attribute to store image URLs. You can also customize other attribute names, as shown below:

The JS Code is as follows:

Copy codeThe Code is as follows:
$ ("Img. lazy"). lazyload ({data_attribute: "attr "});


You only need to set the data_attribute to the corresponding name. (Note: html code is case-insensitive! Therefore, "data-" can only be followed by lower-case letters or numbers .)

Browsers that do not support JavaScript should be downgraded accordingly.

You can use the <noscript> label to define the alternative content/text when the script is not executed. in addition, the search engine crawlers do not process JavaScript scripts, so they can directly capture the content in the <noscript> tag.

Copy codeThe Code is as follows:

<Noscript> </noscript>


CSS style settings:

Copy codeThe Code is as follows:
. Lazy {
Display: none;
}


JS Code:

Copy codeThe Code is as follows:
$ ("Img. lazy"). show (). lazyload ();

Set the response distance for image loading
The default setting of the Lazy Load plug-in is that when an image appears in the browser window, the loading will be triggered. However, by setting the value of the threshold attribute, you can adjust the pre-loading position/distance of the image.

Copy codeThe Code is as follows:
$ ("Img. lazy"). lazyload ({threshold: 200 });


In addition, threshold can be a positive number or a negative number. positive numbers are pre-loaded. If the value is 200, the image starts to load when the image is PX away from the screen. if it is a negative number, the opposite is true. if the value is-200, the image is already displayed in the window, and the distance from the bottom of the browser window is PX.
PS: the distance between the image and the screen is calculated based on the top position of the image.
Note: The threshold setting must take into account the length of the website and the Image Height. If the value is too large, loading may fail. We recommend that you set the value not to exceed half of the height of the corresponding image.

Event-triggered Loading
Events defined by jQuery can be used to trigger loading or custom events.

Copy codeThe Code is as follows:
$ ("Img. lazy"). lazyload ({
Event: "click"
});

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

Copy codeThe 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 animation speed, you can also modify the effectspeed attribute.
Copy codeThe Code is as follows:
$ ("Img. lazy"). lazyload ({
Effect: "fadeIn ",
Effectspeed: 1000
});

The effectspeed attribute is empty by default, so if you do not set it, the animation time is 400 milliseconds.
Container Properties
When the images to be loaded are all placed in a container, you only need to point the container attribute to the object of the container where the img is placed.
Css code:

Copy codeThe Code is as follows:
# Container {
Height: 600px;
Overflow: scroll;
}

Js Code:

Copy codeThe Code is as follows:
$ ("Img. lazy"). lazyload ({
Container: $ ("# container ")
});


If you don't talk nonsense, you can directly look at the Demo. It's not just a vertical one, but also a horizontal Demo.

Failure_limit attributes
Lazy Load has a mechanism to search for img cyclically. search from top to bottom based on the HTML document layout. When the first img that is not displayed/loaded is found, the search will stop. (In fact, it is for $ ("img. lazy ") This object (group) for sequential search)

What is the use of the failure_limit attribute?

Currently, a large number of positioning styles, such as float and position, are used in website design. The layout effect displayed in the browser is significantly different from the DOM sequence in HTML documents.
In this case, a label is displayed on the screen but cannot be displayed !! Because it is placed behind the labels that are not displayed in the HTML document, the label displayed on the screen cannot be loaded. when Lazy Load finds the first undisplayed label, the search has been terminated and does not continue to traverse.

Therefore, you can use the failure_limit attribute.
Copy codeThe Code is as follows:
$ ("Img. lazy"). lazyload ({
Failure_limit: 10
});

In this way, Lazy Load finds 10th undisplayed labels. When there are many images and complex pages, failure_limit is very useful.
The original Article also prompts: If you have a funky layout set this number to something high. If your website layout is "abnormal", we recommend that you set this value to a higher value.

Delayed image download
You can use custom events and setTimeout to set the latency to trigger this event.
Copy codeThe 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 );
});

When an event is set to an event other than scroll, a built-in "appear" event is actually bound. as the name suggests, this event is used to display images. (In fact, scroll also calls this event)

Skip_invisible: Load invisible Images
By default, the Lazy Load plug-in does not Load hidden images (for example, display: none ). this helps to optimize the performance. if you want to attach a hidden image together, set skip_invisible to false.

Copy codeThe Code is as follows:
$ ("Img. lazy"). lazyload ({
Skip_invisible: false
});