jquery deferred loading (lazy loading) plugin Jquery.lazyload.js

Lazy Loadis a useJavaScriptwritten byJQueryPlugins. It can delay loading pictures from a long page. images outside the viewable area of the browser are not loaded, until the user scrolls the page to where they are. this is exactly the opposite of how the picture preloading is handled.Lazy loading of pictures in long pages containing many large pictures can speed up page loading. The browser will enter the ready state after the visible picture is loaded. in some cases it can also help reduce the burden on the server.

How to use:

Lazy Load relies on jQuery. Please add the following code HTML the end of the </body> before :

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

You have to change the label of the picture. The address of the image must be placed on the data-original property. Give the lazy load image a specific class(for example : Lazy). This way you can easily bundle the image plug-ins. The code is as follows:

<imgclass= "lazy"src= "Lazy.jpg"alt=""width= "640"Height= "480"data-original= "Img/example.jpg" /><Scripttype= "Text/javascript">$(function() {    $("Img.lazy"). Lazyload ();});</Script>

set a critical point :

The default slice will appear on the screen when loading .&NBSP; If you want to load the picture ahead of time ,&NBSP; You can set the threshold  options ,  set   threshold  200&NBSP;   the picture on the distance screen; The pixel is loaded in advance

< Script >     $ ("img.lazy"). Lazyload ({    $}); </ Script >

set events to trigger loading :

You can use jquery events, such as click and mouseover You can also use custom events, such as sporty , Span style= "FONT-FAMILY:CALIBRI;" >foobar

< Script >     $ ("img.lazy"). Lazyload ({    " click " }); </ Script >

Use effects :

By default, the plug-in waits for the image to fully load and call Show (). You can use any effect you want. The following code uses fadeIn (Fade-in effect).

< Script >     $ ("img.lazy"). Lazyload ({    "fadeIn " }); </ Script >

for scenarios where JavaScript is not enabled :

JavaScript is active on almost all browsers . but maybe you still want to be able to not support JavaScript The client shows the real picture .  when the browser does not support JavaScript gracefully degraded when ,  you can put real picture fragments in writing <noscript> tag Inside .

<noscript></noscript>

Placeholders can be hidden through CSS .

. Lazy {

Display:none;

}

In a JavaScript -enabled browser , you must display the placeholders when the DOM is ready , This can be done while the plug-in is initializing .

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

When the image is not contiguous :

When scrolling the page, Lazy Loadwill loop to the loaded picture. detects if the picture is in the visible area in the loop. stop Looping by default when you find the first picture that is not in the visible area. the picture is considered to be a stream-distribution., The order of the pictures in the page andHTMLsame order in code. but in some layouts,, This assumption is not tenable.. but you can get throughFailurelimitoption to control the load behavior.

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

Failure_limit:10

});

set the failurelimit to ten so that The plugin stops searching when it finds a picture that is not in the visible area . If you have a wretched layout ,  Please set this parameter up a bit higher .

to load a hidden picture :

There may be a lot of hidden images buried on your page . For example, plugins are used to filter the list ,  You can constantly modify the display status of each article in the list .  to improve performance , Lazy Load hidden images are ignored by default .  if you want to load hidden pictures ,  please add skip_invisible set to false

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

Skip_invisible:false

});

jquery deferred loading (lazy loading) plugin Jquery.lazyload.js