[Recommended] lazy load, jquery plug-in that delays image loading

Lazy load Is a jquery plug-in written in Javascript. It canDelay loading of images on long pages. Images outside the visible area of the browser will not be loaded until the user scrolls the page to their location. This is the opposite of the processing method of image pre-loading.

Delayed loading of images on pages containing many large images can speed up page loading. The browser will be ready after the visible images are loaded. In some cases, it can help reduce the server load.

Lazy load was inspired by Matt mlinac. Yui imageloader Toolbox. This is the demo page.

How to use it?

lazy load depends on jquery. add the following Code to the head region:

<Script SRC="Jquery. js"Type="Text/JavaScript"> </Script><Script SRC="Jquery. lazyload. js"Type="Text/JavaScript"> </Script>
 

Add the following statement to your Execution Code:

$(Http://www.appelsiini.net/projects/lazyload/img").Lazyload();
 

This causes the image in the id = "http://www.appelsiini.net/projects/lazyload/img" area to be delayed.

Set Sensitivity

The plugin provides Threshold You can control the image loading by setting the critical value (the distance from the trigger to the image). The default value is 0 (when the image boundary is reached ).

$(Http://www.appelsiini.net/projects/lazyload/img").Lazyload({Threshold: 200 });
 

Set the critical value to 200. When the visible area is 200 pixels away from the image, the image is loaded. (the literal meaning of this sentence is different from my understanding. The original text is: Setting threshold to 200 causes image to load 200 pixels before it is visible .)

Placeholder Image

You can also set a placeholder image and define an event to trigger the loading action. in this case, you need to set a URL for the placeholder image. transparent, gray, and white 1x1 pixel images are included in the plug-in.

$("IMG").Lazyload({Placeholder: "Img/grey.gif" });
 

Event trigger Loading

Events can be any jquery time, such:   Click   And   Mouseover You can also use custom events, such:   Sporty   And   Foobar By default, the system is waiting until the user rolls to the location of the window. You can stop loading the picture before the gray placeholder image is clicked. You can do this:

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

Use special effects

when the image is fully loaded, by default, the plug-in uses show () to display the graph. in fact, you can use any special effects you want to use. the following code uses fadein effect. this is the demo page.

$("IMG").Lazyload({Placeholder: "Img/grey.gif",Effect: "Fadein" });
 

Picture in Container

You can use the plug-in on the image of the scroll container, such as the DIV element with a scroll bar. all you need to do is define the container as a jquery object and upload it to the initialization method as a parameter. this is a horizontal and vertical scrolling demo page.

CSS code:

# Container {Height: 600px;Overflow: Scroll;}
 

JavaScript code:

$("IMG").Lazyload({Placeholder: "Img/grey.gif",Container:$("# Container")});
 

When images are not arranged in sequence

when scrolling a page, lazy load cyclically loads the loaded image. check whether the image is in the visible area in a loop. by default, the loop is stopped when the first image is not visible. images are regarded as stream distribution. The order of images on the page is the same as that in HTML code. however, in some la s, such assumptions are not true. however, you can use failurelimit Option to Control Loading behaviors.

$("IMG").Lazyload({Failurelimit: 10});
 

Set Failurelimit If this parameter is set to 10, the search will be stopped only when the plug-in finds 10 images that are not in the visible area. If you have a complicated layout, set this parameter a little higher.

Delayed image loading

Lazy load is an incomplete function of the plug-in, but it can also be used for delayed image loading. the following code implements page loading and then loading. after the page is loaded for 5 seconds, images in the specified area are automatically loaded. this is the demo page for delayed loading.

$ (  Function  (  )   { $ (  "IMG: below-the-fold"  ) . Lazyload  (  { Placeholder :   "Img/grey.gif" , Event :   "Sporty"   }  )  ;  }  )  ; $ ( Window ) . Bind  (  "Load"  ,   Function (  )   {   VaR Timeout = SetTimeout (  Function  (  )   { $ (  "IMG"  ) . Trigger  (  "Sporty" )  }  ,   5000  )  ;  }  )  ; 

Download plug-ins

Latest Version: Source code, Compressed code, Packaged code

Known issues

Due to WebKit bug #6656. lazy load cannot be used in Safari and chrome. It will immediately load all the images you are willing to and are not willing to load for you.

It seems that jquery 1.3.x makes the plug-in invalid in IE. all images will be loaded in the background even if they should not be loaded. the author is working hard to solve this problem, during which the plug-in can only be used in jquery 1.2.6.

Also, if you use Add the mint label to the page header. if you add the mint label to the end of the page, it will interfere with the lazy load plug-in. This is a rare problem. If someone finds a solution, contact the author.

 

from: lazy load: delays loading the jquery plug-in for images