Jquery. LazyLoad. js Revised Version Download to implement image delayed loading plug-in

The versions downloaded from the Internet are more or less prone to bugs, especially the flash on IE6 and IE7 after loading. after a long time of searching on the internet, no related solutions have been found. If there is no solution, we have to take advantage of our DIY spirit, solve it by our own ideas, analyze the BUG, handle the logic, and solve Jquery by combining the methods I used to bring up window special effects some time ago. lazyLoad. for details about js compatibility, I will share with you the ideas and methods.

The solution is roughly two points. One is to start with the filter parameters of LazyLoad, and find that there is a parameter that can be used in IE6 and IE7, that is, show, this special effect is used in IE6 and IE7; the second is that non-IE core browsers such as IE8 and later (including IE8), FireFox and Chrome support the special effect of fadeIn, in these browsers, this cool special effect will be used.

When the idea comes out, we can find a solution:

1. First, use JQ to determine the browser type and version. If the browser is IE8 or earlier, use effect = show; otherwise, use effect = fadeIn. The function for judging the browser version is as follows:
Copy codeThe Code is as follows:
Function checkbrowse (){
Var ua = navigator. userAgent. toLowerCase ();
Var is = (ua. match (/\ B (chrome | opera | safari | msie | firefox) \ B/) | ['', 'mozilla ']) [1];
Var r = '(? : '+ Is +' | version) [\/:] ([\ d.] + )';
Var v = (ua. match (new RegExp (r) | []) [1];
JQuery. browser. is = is;
JQuery. browser. ver = v;
Return {
'Is': jQuery. browser. is,
'Ver ': jQuery. browser. ver
}
}

I added the above Code to the JQ package for future use. The path is http://demo.jb51.net/js/2011/lazyload/js/lazyload/jquery.js.

2. Transform the Jquery. LazyLoad. js function to display different filter effects based on the browser version:
Copy codeThe Code is as follows:
Var public = checkbrowse ();
Var showeffect = "";
If (public ['IS'] = 'msie '& public ['ver'] <8.0 )){
Showeffect = "show"
} Else {
Showeffect = "fadeIn"
}
JQuery (document). ready (function ($ ){
$ ("Img"). lazyload ({
Placeholder: "http://demo.jb51.net/js/2011/lazyload/Js/lazyload/grey.gif ",
Effect: showeffect,
Failurelimit: 10
})
});

Jquery. LazyLoad. js usage:
1. Store the following files in the same directory:
Jquery. js
Jquery. layzload. js
Grey.gif
2. Add the following code where special effects are needed:
<Script type = "text/javascript" src = "http://demo.jb51.net/js/2011/lazyload/Js/lazyload/jquery.js"> </script>
<Script type = "text/javascript" src = "http://demo.jb51.net/js/2011/lazyload/Js/lazyload/jquery.lazyload.js"> </script>

Download the modified Jquery. LazyLoad. js Plugin:
Lazyload.rar
Parameters of Jquery. LazyLoad. js plug-in are described as follows:
The following describes some parameters of the LazyLoad plug-in for users to make more appropriate results.

1. Place a placeholder in advance with an image
Placeholder: "img/grey.gif ",
Parameter: placeholder. The value is the path of an image. This image is used to occupy the position of the image to be loaded. When the image is loaded, the occupied bitmap is hidden.

2. Loading Effect
Effect: "fadeIn ",
Parameters: effect (special effect). values include show (direct display), fadeIn (fade in), and slideDown (drop-down). fadeIn is commonly used.

3. Start loading in advance.
Threshold: 200,
Parameter: threshold. The value is a number, indicating the page height. If it is set to 200, it indicates that the image is loaded when the scroll bar is still 200 from the target location, so that users are not aware of the image.

4. Events are loaded only when they are triggered.
Event: "click ",
Parameter: event. values include click, mouseover, sporty, and foobar (...). You can click the mouse or the image to start loading. The last two values are not tested...

5. Implement effects on images in a container
Container: $ ("# container "),
Parameter: container. The value is a container. lazyload, which takes effect when pulling the browser scroll bar by default. This parameter allows you to load images in turn when pulling the scroll bar of a DIV.

6. chaotic image sorting
Failurelimit: 10,
Parameter: failurelimit. The value is a number. lazyload does not load the first image that is not in the visible area by default. However, when the HTML container is messy, the image in the visible area may not be loaded, failurelimit is intended to load N images outside the visible area to avoid this problem.