Introduction and example of the use of delayed loading lazyload.js for Web page images __js

deferred loading picture plugin lazyload.js using method

We often see a lot of pages of the picture is not an open page is all loaded, but browse to the current picture location to show it. How does this come true? In fact, this is the current more popular "delayed loading" (Lazy load) technology, inspired by Matt Mlinac made Yui Imageloader Toolbox. We often see a lot of pages of the picture is not an open page is all loaded, but browse to the current picture location to show it. How does this come true?

In fact, this is the current more popular "delayed loading" (Lazy load) technology, inspired by Matt Mlinac made Yui Imageloader Toolbox.

Demo page: http://www.appelsiini.net/projects/lazyload/enabled.html

Later, a more complete jquery plugin was formed: jquery.lazyload.js

Here's how to use the Jquery.lazyload.js:

Lazy Load relies on jQuery. Please add the following code to the page Head area:

<script src= "Jquery.js" type= "Text/javascript" ></script>
<script src= "Jquery.lazyload.js" type= "Text/javascript" ></script>

You must modify the HTML code. Set up a booth picture in the SRC attribute, and the demo page uses the 1x1 pixel gray GIF picture. And you need to set the URL of the real picture to the Data-original property. Here you can define a specific class to get a picture object that needs to be loaded late. In this way you can simply control the plug-in bindings.

The code to process the picture is as follows.

$ ("Img.lazy"). Lazyload ();

This will allow all pictures with class lazy to be delayed loading. You can refer to the basic options demo

Setting sensitivity

Almost all JavaScript in the browser is active. However, you may still want to display real images on clients that do not support JavaScript. When the browser does not support JavaScript gracefully demote, you can put the real picture fragment in the Write <noscript> tag.

<noscript></noscript>"

You can hide placeholders through CSS.

. Lazy {
Display:none;
}

In browsers that support JavaScript, you must display placeholders when DOM ready, which can be done while the plug-in is initialized.

$ ("Img.lazy"). Show (). Lazyload ();

These are optional, but they should be done if you want the plug-ins to degrade gracefully.

Setting sensitivity

By default, pictures are loaded when they appear on the screen. If you want to load the picture in advance, you can set the threshold option and set the threshold to 200 so that the picture is loaded ahead of 200 pixels from the screen.

$ ("Img.lazy"). Lazyload ({threshold:200});

Placeholder picture

You can also set up a placeholder picture and define events to trigger the load action. Then you need to set a URL address for the placeholder picture. Transparent, gray and white images of 1x1 pixels are already included in the plugin.

Event Trigger loading

Events can be any jQuery time, such as Click and MouseOver. You can also use custom events, such as: Sporty and foobar. Waits by default until the user scrolls to the location of the picture on the window. To prevent loading pictures before the gray placeholder picture is clicked, you can do this:

$ ("img"). Lazyload ({
PLACEHOLDER: "Img/grey.gif",
Event: "Click"
});

Use special effects

When the picture is fully loaded, the plugin uses the show () method to display the graph by default. In fact, you can use any special effects you want to deal with. The following code uses the FadeIn effect. This is the effect demo page.

$ ("Img.lazy"). Lazyload ({
Effect: "FadeIn"
});

The picture is inside the container

You can use the plugin on a picture of a scrollable container, such as a DIV element with a scroll bar. All you have to do is define the container as a JQuery object and upload it as a parameter to the initialization method. This is the Horizontal scrolling demo page and the Vertical scrolling presentation page.

#container {
height:600px;
Overflow:scroll;
}
$ ("Img.lazy"). Lazyload ({
Container: $ ("#container")
});

When pictures are not arranged in order

When scrolling the page, Lazy load loops to the loaded picture. Detects whether a picture is in the viewable area in a loop. By default, the loop stops when you find the first picture that is not in the visible area. Pictures are considered streaming, and the order of the pictures in the page is the same as in the HTML code. But in some layouts, such assumptions are not tenable. However, you can control the load behavior with the FAILURELIMIT option.

$ ("Img.lazy"). Lazyload ({
Failure_limit:10
});

The Failurelimit is set to 10 so the plugin finds 10 pictures that are not in the visible area before stopping the search. If you have a wretched layout, please set this parameter a little higher.

Lazy Load Picture

An incomplete feature of the Lazy load plug-in, but this can also be used to implement a delayed loading of the picture. The following code implements the page load completion and then loads it. After the page has finished loading for 5 seconds, the picture in the specified range is automatically loaded. This is the Lazy Load demo page.

$ (function () {
$ ("Img:below-the-fold"). Lazyload ({
Event: "Sporty"
});
});
$ (window). Bind ("Load", function () {
var timeout = settimeout (function () {$ ("Img.lazy"). Trigger ("sporty")}, 5000);
});

Load a hidden picture

There may be a lot of hidden pictures buried on your page. For example, Plug-ins used to filter the list, you can constantly modify the list of the purpose of the display status. To improve performance, Lazy Load ignores hidden pictures by default. If you want to load a hidden picture, set Skip_invisible to False

$ ("Img.lazy"). Lazyload ({
Skip_invisible:false
});

Lazyload.js Actual example (if you want to use a picture to delay loading a reference to the past)
var lazyload = {
Init:function () {
Return $ ("img[lazyload]"); * * Find all the picture files on the page * *
},
Calculate:function (Lazyloadobject) {
var windowheight = $ (window). Height ();
var arrreturn = {};
var _scrolltop;
if (Lazyloadobject.length = = 0) {
return null;
}
else {
Lazyloadobject.each (function (i) {
_scrolltop = parseint ($ (this). Offset (). Top-windowheight);
if (!arrreturn.hasownproperty (_scrolltop)) {
Arrreturn[_scrolltop] = new Array ();
}
Arrreturn[_scrolltop].push ($ (this));
});
This. Arrload = Arrreturn;
return arrreturn;
}
},
Arrload:null,
Isload:function (scrolltop, objectstop) {
if (objectstop!= null && objectstop!= {}) {
For (I in this. Arrload) {
if (parseint (i) <= scrolltop && this. Arrload.hasownproperty (i)) {
for (j = 0; J < this. Arrload[i].length; J + +) {
if (this. Arrload[i][j].attr ("Lazyload"))
This. Arrload[i][j].attr ("src", this. Arrload[i][j].attr ("Lazyload")). Removeattr ("Lazyload");
}
Delete this. Arrload[i];
}
}
}
},
Run:function () {
var lazyloadobject = this. Init ();
This. Calculate (Lazyloadobject);
Arrscrolltop = this. Arrload;
if (arrscrolltop = = null) {
return false;
}
else {
var _this = this;
_this. Isload ($ (window). scrolltop (), arrscrolltop);
$ (window). Scroll (function () {
_this. Isload ($ (this). ScrollTop (), arrscrolltop);
});
}
}
}

$ (function () {
Lazyload.run ();
});

$ (window). Resize (function () {
Lazyload.run ();
});