Web page image Delay loading technology

The use of image delay loading technology on mobile web sites to speed up the loading speed of web pages.

This is what I want to achieve, after all, the mobile phone page is small, loading speed must be fast, but do not want a picture of a page, so that users experience poor.

The following is the implementation process.

Download a lot of online version, a lot of it can not be used, several versions of comparison, plus improvements, I finally made this version to share with you.

There are many versions of JS online, more complex, I use here is jquery, more convenient and fast.

The first thing to do is download the jquery package, which I have already provided under the Web page for the modified, absolutely available.

Adapt to each version of the browser, as well as mobile browser

The second step, the download of the file will be extracted into a JS directory inside

/js/lazyload/grey.gif

/js/lazyload/jquery.js

/js/lazyload/jquery.lazyload.js

Then, in the template page that requires the effect, add the following calling code

My advice is to put the last line in front of the head.

The path address changes itself, according to the corresponding rules in your template

Step three: Modify the Jquery.lazyload.js file

Find. Context img

Under this description, look carefully.

If removed. The context is left with the IMG is deferred loading all the pictures, according to different templates for the corresponding changes, such as my template, I only need the content of the picture delay loading, so changed to This only delays loading. The picture within the context container may otherwise affect the loading of other pictures;

Attached picture delay loading technical code download address

Lazyload

Finally, a few of the parameters inside

1, occupy the position with the picture ahead of time

PLACEHOLDER: "Img/grey.gif",

Parameter: Placeholder, the value is a picture path. This picture is used to occupy the position of the picture that will be loaded, while the bitmap is hidden when the picture is loaded

2, what effect does the load use

Effect: "FadeIn",

Parameters: effect (special effects), the value has show (direct display), FadeIn (Fade), Slidedown (Drop-down), commonly used FadeIn

3, start loading early

THRESHOLD:200,

Parameters: Threshold, the value is a number, which represents the height of the page. If set to 200, the scroll bar starts loading pictures at a height of 200 from the target and can be done without the user noticing.

4, the event is triggered before loading

Event: "Click",

Parameters: Event, value has click (click), mouseover (mouse across), sporty (movement), Foobar (...). You can implement the mouse mo or click the picture to start loading, the latter two values have not been tested ...

5, the image of a container to achieve the effect

Container: $ ("#container"),

Parameter: container, the value is a container. Lazyload defaults to pull the browser scroll bar, this parameter allows you to pull a div scroll bar in order to load the picture

6, when the picture sort is confused

Failurelimit:10,

Parameters: Failurelimit, the value is a number. Lazyload defaults to not continue loading when it finds the first picture that is not in the visible area, but when the HTML container is messed up, the picture in the visible area may not be loaded. Failurelimit is intended to load pictures outside the N-visible area to avoid this problem.