Download the revised version of Jquery.LazyLoad.js to implement image lazy loading plug-in_jquery

The version downloaded from the Internet has more or less bugs, especially the flashing of pictures in IE6 and IE7 after loading is a big problem. I searched online for a long time and found no relevant solution. If there is no solution, we have to use our DIY spirit to solve it by ourselves, analyze the bugs, and sort out the ideas. Combined with the method I used to create pop-up window effects some time ago, I solved the compatibility problem of Jquery.LazyLoad.js. Now I will give you the ideas. and methods to share with you.

The solution is roughly two points. One is to start with the filter parameters of LazyLoad itself. It is found that there is a parameter that can be used in IE6 and IE7, which is show, then use this special effect in IE6 and IE7; Second, non-IE core browsers such as IE8 and above (including IE8), FireFox, and Chrome all support the fadeIn effect, so this cool special effect can be used in these versions of browsers.

After the idea came out, I thought of a solution:

1. First, use JQ to determine the browser type and version. If it is a browser below IE8, use effect= show, otherwise use effect=fadeIn. The function to determine the browser version is as follows:

Copy the code The 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. Modify the Jquery.LazyLoad.js function to display different filter effects according to the browser version:

Copy code The 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
})
});

Instructions for using Jquery.LazyLoad.js:
1. Store the following files in the same directory Below:
jquery.js
jquery.layzload.js
grey.gif
2. Add the following code where special effects are needed:



Jquery.LazyLoad.js plug-in revised version download :
lazyload.rar
Jquery.LazyLoad.js plug-in parameters detailed explanation:
The following explains some parameters of the LazyLoad plug-in for users to make decisions A more relevant effect.

1, use an image to occupy the space in advance
placeholder: "img/grey.gif",
Parameter: placeholder, the value is a certain image path. This image is used to occupy the image to be loaded Position, when the image is loaded, the placeholder image will be hidden

2, what effect to use for loading
effect: "fadeIn",
Parameter: effect (special effect), the value is show( Direct display), fadeIn (fade in), slideDown (drop down), etc. Commonly used fadeIn

3, start loading in advance
threshold: 200,
Parameter: threshold, the value is a number, representing the page height. If set to 200, it means that the scroll bar will start loading the image when it is still 200 meters away from the target position, which can prevent the user from noticing.

4, it will be loaded only when the event is triggered
event: " click",
Parameter: event, the values ​​include click (click), mouseover (mouse over), sporty (sporty), foobar (...). You can realize that the mouse does not move over or the picture starts loading after clicking on it. The latter two The value has not been tested...

5, to achieve the effect for pictures in a certain container
container: $("#container"),
Parameter: container, the value is a certain container. lazyload defaults to pull browsing It takes effect when the scroll bar of a certain DIV is pulled. This parameter allows you to load the pictures in sequence when pulling the scroll bar of a DIV.

6. When the pictures are sorted in a disordered manner. The value is a number. By default, lazyload will not continue loading when it finds the first image that is not in the visible area. However, when the HTML container is confused, images in the visible area may not be loaded. Failurelimit is intended to load N images. Images outside the visible area to avoid this problem.