Photo lazy loading (load on demand) effect

Aug 4 posted in Web (RSS), comments.

Advertisements

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.
Effect of delay in loading this image is Lazyload based on the expansion, 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.

Effect Picture

On-line results preview

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.

First used to determine whether there is _attribute custom attributes:

if ( this._hasAttribute( img ) ) {

    ...

}

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, the default will be a small icon (not set src).
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  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 );
        }
  }
});