ImagesLazyLoad picture lazy loading effect

ImagesLazyLoad picture collections this article on the effect of delay in loading is recommended to the CSDN Home 2010-03-04 How are recommendations?
Prior to doing a photo viewing effect, to see the back of a small map must wait until the front end load, and the big picture of the location is behind a large number of small plans, resulting in larger thumbnail are loaded until the end in order to show that To solve this problem, we thought Lazyload results.
Now many web sites use a similar effect, such as Taobao, Bing and so on.
The image delay loading effect is based on the expansion of the Lazyload, the major expansion of access to img elements, access to src and pictures loaded parts.

Compatibility: ie6/7/8, firefox 3.5.5, opera 10.10, safari 4.0.4, chrome 3.0
Safari, and chrome which does not support some features.

"! - StartFragment --><!-- StartFragment -" ImagesLazyLoad picture lazy loading effect

Description of the procedures

[Photo] access

The first filter function is defined as a screening procedure:

var getSrc = opt.getSrc,
    filter = $$F.bind( this._filter, this,
            opt["class"],
            getSrc ? function(img){ return getSrc(img); }
                : function(img){ return img.getAttribute( attribute ) || img.src; },
            opt.holder
        );


Then use this filter function, filter out the need for a picture collection:

this._elems = $$A.filter(
        opt.images || container.getElementsByTagName("img"), filter
    );


If you want to customize the image collection can be an optional parameter in the program properties to set images, or automatically from the container to obtain img element as a picture collection.

Where filter is a filter package style cls, method of access to getSrc and placeholder src Figure holder three parameters _filter selection process.
The _filter program, will be screened and organize image collections.
If self-defined "class" filter style, the style will automatically be excluded does not correspond to the image:

if ( cls && img.className !== cls ) return false;


Then getSrc Get Original address, which is actually to show the picture address.
If you have a custom getSrc will be given priority.
If not, then save the Original address _attribute through the custom properties from the element to obtain.
Last element of the src attribute directly from the acquisition.

Then exclude src does not exist:

if ( !src ) return false;


Original address is pay attention to dealing with elements of the current src of the situation:

if ( src == img.src ) {
    if ( img.complete || $$B.chrome || $$B.safari ) return false;
    img.removeAttribute("src");
}


If the complete is true, note picture has finished loading, and can be excluded;
If it is chrome or safari, can not be canceled the current load, so it excluded (specifically, the HTTP request to see pictures section).
Otherwise, use removeAttribute remove the src attribute to cancel the loading of the current picture.

If you set the holder footprint map, on the re-set the image src:

if ( holder ) { img.src = holder; }


Original recorded the address of the last element _attribute custom attributes:

img.setAttribute( this._attribute, src );


After finishing one by one picture element selection, we have to load the picture collection.

Load] [Picture

ImagesLazyLoad compared LazyLoad, has been achieved _onLoadData loader, no need to define their own load.
The _onLoadData program, mainly used to display images.

_hasAttribute Methods used to determine first whether there is _attribute custom attributes.
This is the case in the _hasAttribute method to determine this:

this._hasAttribute = $$B.ie6 || $$B.ie7
    ? function(img){ return attribute in img; }
    : function(img){ return img.hasAttribute( attribute ); };


As ie6 / 7 with other browsers and the property of the attribute different understanding, it should be dealt with separately, detailed reference here attribute / property.
To ensure compatibility, the program will give priority to the use of attribute a way to operate the custom attributes.

When the img there _attribute custom properties, you use getAttribute to get the Original address, and set the img's src, using removeAttribute to remove the custom attributes.
Remove the significance is that when there are multiple instances use the same element, can guarantee will not repeat the image loading time after the load, namely, to prevent the conflict between instances.

HTTP request] [image

Here to talk about the development process found in some of the pictures loaded on the issue.

First, load the empty string, if it to the img's src set to an empty string, it may get unexpected results.
For example, in http://xxx/test.htm inside <img src=""> will happen the following circumstances:
ie the relative address of the request will produce, namely: http://xxx/
Safari / Chrome will have the current page address of the request that: http://xxx/test.htm
Opera / Firefox does not produce a request for detailed reference to Nicholas C. Zakas's "Empty image src can destroy your Site."
If you do not want to load the image should not be set to an empty src value, because a request may also be a waste of resources.
Can be like a program, through the removeAttribute to remove on the list.

Another problem is that Safari and Chrome, due to webkit kernel bug, was loading the picture, and can not be removed load.
So the program part of the abolition of images loaded, if it is Safari or Chrome will continue to load, not to delay.
This issue was first from the lifesinger of datalazyload description of part of the see, the specific use Fiddler to test yourself.

More information can refer to lifesinger's "image HTTP requests."

[Inheritance structure]

In the published program, this is the first one to use the inheritance, and I usually have no how to use, so it was not mature, and be to try the water bar.
Wrapper to do with the succession process, detailed reference tool for library instructions.
First with the wrapper to ImagesLazyLoad packaging (inherited) LazyLoad:

var ImagesLazyLoad = $$.wrapper(function(options) {
    ...
}, LazyLoad);

Then extend extension prototype, add a sub-class methods function:

$$.extend( ImagesLazyLoad.prototype, {
  ...
});

_initialize Which method is used to set the sub-class properties, due to covering the same name as the parent class method, so by LazyLoad.prototype._initialize to call, but also call attention to the use to fix this.

There are _setOptions method is used to set the sub-class optional attributes:

return LazyLoad.prototype._setOptions.call(this, $$.extend({
    ...
}, $$.extend( options, {
    onLoadData:    this._onLoadData
})));


Sub-class _setOptions approach also covers the parent class method, a solution with the _initialize.
The first parameter is a subclass of the optional attributes, and the second parameter is a subclass defined attributes, that is no longer optional but by the process to define the attributes.

Generally speaking, this is a simple succession, and so come after the expansion has accumulated certain experience bar.

Tips

[Setting] src

There are several ways to set the Original Address:
1, the normal set src: progressive enhancement is not supported when js can display, but the chrome and safari with bug, do not support this approach;
2, the Original Address set to the custom properties in: All browsers are compatible, but do not support js when the images do not display;
3, using a custom function to get: Use a more complex situation, the need to manually set up.
Specific still have to choose according to the actual situation.

[Set holder]

If you are using a holder footprint map, the program will automatically set the picture element of display placeholder map.
Recommended loading images to set up, but often with the loading diagram Original size is different.
If you set the Original img width high, want to maintain the loading map size, it set the background on it.
However, so that ie, we do not set the src by default there will be a small icon.
To get rid of this little icon you can set the holder to a transparent image link, or reference to where TRANSPARENT "do" a transparent image.
The same is true instance set, you can reference.

[Enforcement procedures]

Window.onload 10 million can not be executed because the pictures have been loaded when finished.
But should be back in the container (window, then is the end of the document) or DOMContentLoaded perform.

Program source code

var ImagesLazyLoad = $$.wrapper(function(options) {
    this._initialize( options );
    // If there is no element of the exit  
    if ( this.isFinish() ) return;
    // Initialization mode settings  
    this._initMode();
    // The first trigger  
    this.resize(true);
}, LazyLoad);

$$.extend( ImagesLazyLoad.prototype, {
  // Initial program  
  _initialize: function(options) {
    LazyLoad.prototype._initialize.call(this, [], options);
    // Set the subclass property  
    var opt = this.options;
    this.onLoad = opt.onLoad;
    var attribute = this._attribute = opt.attribute;
    // Set the load picture collection  
    var getSrc = opt.getSrc,
        filter = $$F.bind( this._filter, this,
                opt["class"],
                getSrc ? function(img){ return getSrc(img); }
                    : function(img){ return img.getAttribute( attribute ) || img.src; },
                opt.holder
            );
    this._elems = $$A.filter(
            opt.images || this._container.getElementsByTagName("img"), filter
        );
    // Determine whether the property is already loaded method  
    this._hasAttribute = $$B.ie6 || $$B.ie7
        ? function(img){ return attribute in img; }
        : function(img){ return img.hasAttribute( attribute ); };
  },
  // Set default property  
  _setOptions: function(options) {
    return LazyLoad.prototype._setOptions.call(this, $$.extend({// The default value  
        images:        undefined,// The picture collection  
        attribute:    "_lazysrc",// Save the original image address custom properties  
        holder:        "",// Accounting for bitmap  
        "class":    "",// Filter style  
        getSrc:        undefined,// Gets the original address program  
        onLoad:        function(){}// When you execute the load  
    }, $$.extend( options, {
        onLoadData:    this._onLoadData
    })));
  },
  // Filter finishing picture object  
  _filter: function(cls, getSrc, holder, img) {
    if ( cls && img.className !== cls ) return false;// Exclude styles that do not correspond  
    // Gets the address of the original figure  
    var src = getSrc(img);
    if ( !src ) return false;// Exclude the src does not exist  
    if ( src == img.src ) {
        // Exclude has loaded or not stop loading of  
        if ( img.complete || $$B.chrome || $$B.safari ) return false;
        img.removeAttribute("src");// Remove the src  
    }
    if ( holder ) { img.src = holder; }
    // Use custom attribute records the original address  
    img.setAttribute( this._attribute, src );
    return true;
  },
  // Display picture  
  _onLoadData: function(img) {
    var attribute = this._attribute;
    if ( this._hasAttribute( img ) ) {
        img.src = img.getAttribute( attribute );
        img.removeAttribute( attribute );
        this.onLoad( img );
    }
  }
});


Author: http://www.cnblogs.com/cloudgamer/
  • del.icio.us
  • StumbleUpon
  • Digg
  • TwitThis
  • Mixx
  • Technorati
  • Facebook
  • NewsVine
  • Reddit
  • Google
  • LinkedIn
  • YahooMyWeb

Related Posts of ImagesLazyLoad picture lazy loading effect

  • js examples of common events

    <html> <head> <script type="text/javascript"> / / Which mouse button is clicked function whichButton1 (event) ( if (event.button == 2) ( alert ( "You clicked the right mouse button!") ) else ( alert ( "You c ...

  • flash chart summary

    pen Flash Chart is an open source Flash chart drawing tool, offers a variety of programming interfaces, including PHP, Ruby, Perl, Python, Java,. Net, AS, JS, etc. to generate a variety of data interfaces, and then Flash to display the function is to ...

  • IBM Ajax Tutorial Series

    Links: http://ibm.csdn.net/ISN_J.aspx?action=JMP&pointid=1550 Part 10: Using JSON for data transmission In the asynchronous application to send and receive information, you can choose to plain text and XML as data format. Ajax grasp of this issue ...

  • jquery ajax example

    1. Check js file $. ajax (( type: "GET", url: "test.js", dataType: "script" )) 2.post data $. ajax (( type: "POST", url: "xxxx", data: "name = zhaoaiqing & age = 25", success: function ( ...

  • Strength of live practice teaching materials, suitable for each person team look - UFIDA Hua Table CTO talk about "out of the software factory"

    A few months ago, on reading "Going the software factory," one book, not yet published at that time, it can be considered the reference of the watch. Although the language rather uneventful, but the contents of people really can not but carry on

  • Workspace run under different Eclipse

    Now do live more and more often required to use eclipse in java and ruby & rails project conducted between the tangential shear from the past, because in the rails project used a coloring Aptana preferences, the results open the java project sour ...

  • Software development sunflower Baodian [reprint]

    Master the ability to reuse code very familiar with the new API's fast. This is because, he once used a lot of the API, have a lot of reusable code. He knows what is available and what is deficient. He has been using Qt, also used by gtk +, also used

  • Application of spring struts2.0 hibernate HQL

    Therefore, in the development of statistical inquiry system, as far as possible through the use of select statement to write the required query property way back relational data, and avoid using the first query return persistent object (in this way are in

  • can not be represented as java.sql.Timestamp

    Development of procedures for the use of hibernate when, some time there is no need to fill in the fields, but after the hibernate query time reported "Java.sql.SQLException: Value'0000-00-00 'can not be represented as java.sql.Timestamp ...

  • Struts2 + hibernate + spring problem user log in

    dao layer services layer action jsp <tr> <td align="center"> <b> user name: </ b> </ td> <td> <s: textfield name = "czyNumber" cssClass = "textstyle" theme = "simple" size = &q

blog comments powered by Disqus
Recent
Recent Entries
Tag Cloud
Random Entries