Photo lazy loading (load on demand) effect

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

Photo lazy loading (load on demand) effect

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,
getSrc ? function(img){ return getSrc(img); }
: function(img){ return img.getAttribute( attribute ) || img.src; },

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.safari ) return false;

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, $$.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.


[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
        // The first trigger
}, LazyLoad);

$$.extend( ImagesLazyLoad.prototype, {
  // Initial program
  _initialize: function(options) {, [], 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,
                                getSrc ? function(img){ return getSrc(img); }
                                        : function(img){ return img.getAttribute( attribute ) || img.src; },
        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, $$.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.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 );

分类:Web 时间:2008-08-04 人气:445
blog comments powered by Disqus


  • jQuery Photo lazy loading 2011-05-01

    jquery Plug-ins to achieve picture lazy - jquery.lazyload seen in Taobao Products , Image is loaded in the drop-down scroll bar, this is a very good user experience . Reduce page load time, but also reduce the pressure on the server , Used to check t

  • The project encountered in the ssh lazy loading problem (finally solved !!!) 2010-11-11

    hibernate3.3.2 + spring3.0.3 + struts2.2.1 Lazy loading (Load On Demand) is a unique and powerful data access method, which can automatically when the user scrolls the page to get more data, and the new data obtained will not affect the display of th

  • Lazy Load, jQuery plug lazy loading picture 2011-05-31

    Quote from Lazy Load, jQuery plug-in delay in loading pictures Jan 31st, 2010 Translate Leave a comment Go to comments. This translation from the Lazy Load Plugin for jQuery, introduce

  • Lazyload lazy loading effect 2010-11-01

    Lazyload is achieved by delaying the loading loaded on demand, to save resources and speed up the browsing speed purposes. Online there are many similar effect, this Lazyload main features are: Support the use of window (window) or element as a conta

  • Hibernate lazy loading in the load method and the principle of 2010-08-29

    When using the session method in load record in the database query, we return a proxy object, not really need that object; for example, there is a Student table in the database, we have cn.binyulan.doman.Student areas object, if the query Id is "2006

  • Lazyload lazy (slow load) results 2009-04-09

    Lazyload be achieved through the lazy load on demand, to save resources, speed up the browsing speed purposes. Online there are many similar effect, this Lazyload main features are: Support the use of window (window), or elements of a container objec

  • jquery form of lazy loading tree GridTree version (including demo project, source) 2010-04-03

    The previous table shows the tree Form tree development experience Important: (1) on the lazy loading: that is the first time shows the time table tree display only part of the first layer nodes, and then when clicking on the icon containing the chil

  • Hibernate lazy loading FOR Connection 2010-05-10

    Hibernate Collection property of lazy loading policy : In the collection properties, you can configure the lazy loading policy , A value of :true/false/extra true: The default value, which means that only the collection gets inside the element object

  • Hibernate Lazy loading not fully realized due to OO 2010-06-02

    Transfer from: Object and relational database fundamental difference exists between, ORM (object / relational mapping) tried to object mapping to relational database table structure, which simplifies storage object

iOS 开发

Android 开发

Python 开发



PHP 开发

Ruby 开发






Javascript 开发

.NET 开发



Copyright (C), All Rights Reserved. 版权所有 闽ICP备15018612号

processed in 0.041 (s). 12 q(s)