Jquery.LazyLoad.js revision download, implement picture delay loading plugin

has been concerned about Jquery.LazyLoad.js this special effect, but has been no use, these days of research, and applied to the actual, SEO aspects of the site does not help, but you can save some traffic, for the large web site is particularly important, as to the savings of how much traffic I can not count. Download from the Internet version of some bugs, especially after loading in the IE6 and IE7 Flash is a big problem, on the internet for a long time, also did not find the relevant solutions. No solution, we have to play the spirit of DIY, their own ideas to solve, analysis of the bug, rationale, combined with the previous period of time I do pop-up window effects of the method, to solve the Jquery.LazyLoad.js compatibility problem, now will be thinking and methods to share with you.

The solution is roughly two points, one is from the lazyload itself filter parameters, found that there is a parameter in IE6 and IE7 is can be used, is show, then in the IE6 and IE7 with this special effect, the second is IE8 above (including IE8), FireFox, Non-IE core browsers, such as chrome, support fadein effects, so use this cool effect in these versions of the browser.

Thinking out, we will find a solution:

1, first use JQ to determine the browser type and version, if it is IE8 below the browser to use Effect=show, otherwise use Effect=fadein, judge the browser version function as follows:

 functionCheckbrowse () {varUA =navigator.userAgent.toLowerCase ();varis = (Ua.match (/\b (chrome|opera|safari|msie|firefox) \b/) | | [', ' Mozilla ']) [1]; varr = ' (?: ' + is + ' |version) [\\/:] ([\\d.] +) '; varv = (Ua.match (NewREGEXP (r)) | | []) [1]; JQuery.browser.is=is ; JQuery.browser.ver=v;return { ' Is ': jQuery.browser.is,' Ver ': JQuery.browser.ver}} 

2, transform the Jquery.LazyLoad.js function, according to the browser version to display different filter effects:

var public =var showeffect = ""if ((public[' is '] = = ' MSIE ' && public[' ver ' < 8.0 = "Show"Else= "FadeIn" } jQuery (document). Ready ( function ($) {$ ("img""http://demo.jb51.net/js/2011/lazyload/Js/lazyload/grey.gif"10

Jquery.LazyLoad.js How to use:
1. Store the following files under the same directory:
Jquery.js
Jquery.layzload.js
Grey.gif
2. Add the following code where you need to use the special effects:
<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>

Jquery.LazyLoad.js plug-in revision download:
Lazyload.rar
Jquery.LazyLoad.js Plug-in Parameters:
The following is a description of some parameters of the Lazyload plug-in, for the user to make a more appropriate effect.

1, pre-occupied with pictures
PLACEHOLDER: "Img/grey.gif",
Parameter: Placeholder, the value is a picture path. This image is used to occupy the position of the image to be loaded, and the bitmap will be hidden when the image is loaded.

2. What effect does the load use?
Effect: "FadeIn",
Parameters: effect (special effects), values have show (direct display), FadeIn (Fade in), Slidedown (drop), etc., commonly used fadeIn

3, start loading early
THRESHOLD:200,
Parameter: Threshold, the value is a number, which represents the height of the page. If set to 200, the scrollbar will start loading the picture when it is 200 higher than the target position, allowing the user to be unaware.

4, load only when event is triggered
Event: "Click",
Parameters: Event, value has click (click), mouseover (mouse over), sporty (motion), Foobar (...). You can implement the mouse over or click on the image to start loading, the latter two values are not tested ...

5, to the picture in a container to achieve the effect
Container: $ ("#container"),
Parameter: container, value is a container. Lazyload By default when you pull the browser scroll bar, this parameter allows you to load the scroll bar of a div by loading the picture in sequence.

6, when the picture is sort of chaotic
Failurelimit:10,
Parameter: Failurelimit, the value is a number. Lazyload by default when the first image not in the visible area is found, it will not continue to load, but when the HTML container is confusing, the picture in the visible area is not loaded. Failurelimit is intended to load images outside of the visible area of N to avoid this problem.

Jquery.LazyLoad.js revision download, implement picture delay loading plugin