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

_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, $$.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, 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
    // 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 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 );


分类:Web 时间:2010-04-28 人气:340
blog comments powered by Disqus


  • could not bind value '25732 'to parameter: 1; java.lang.String 2011-01-18

    Today in the background to add a proxy feature: the abolition of the domain name transferred. Encountered in the process of writing an exception, the information is as follows: could not bind value '25732' to parameter: 1; java.lang.String The reason

  • With Play! Framwork, lucene, taobao kissy suggest to achieve the full function before and after the end of 2010-11-10

    I is based on the Play! Framework developed site would like to know children's shoes can look this post, the latest version is 1.1, as well as children's shoes never heard of play! Framework it? Simple science with

  • Firefox and IE browser are some differences between the collection of 2010-08-06

    Quote 1, IE and FireFox the js and css png transparent AlphaImageLoader filter: progid: DXImageTransform.Microsoft.AlphaImageLoader (enabled = bEnabled, sizingMethod = sSize, src = sURL) enabled: Optional. Boolean values (Boolean). Set or retrieve th

  • ie with the switch to Firefox js differences 2010-09-29

    Css today wrote: event: expression ( onmouseover = function () () , Onmouseover = function () () ) , We found that even under the Firefox incompatibility does not reflect, so look for a moment from the Internet, written by different people ie and Fir

  • ie and Firefox compatibility issues (solution) 2011-01-05

    1. Document.form.item problems (1) Existing problems: There are many existing code document.formName.item ("itemName") such a statement, not in Firefox (Firefox) to run (2) Solution: Instead document.formName.elements ["elementName"] 2

  • JavaScript 图片预览效果 推荐 2013-11-26

    随着浏览器安全性的提高,要实现图片预览也越来越困难.不过群众的智慧是无限的,网上也有很多变通或先进的方法来实现.在研究了各种预览方法后,作为总结,写了这个程序,跟大家一起分享. 上次写的简便无刷新文件上传系统最初的目的就是用来实现这个图片预览效果. 兼容:ie6/7/8, firefox 3.5.5 后台支持下还兼容:opera 10.10, safari 4.0.4, chrome 3.0 ps:兼容opera, safari和chrome需要后台支持,请下载实例测试. 程序说明 [基本原理]

  • Firefox and ie compatibility issues 2010-07-26

    1. Document.form.item problem (1) Existing problems: There are many existing code document.formName.item ("itemName") This statement can not be in Firefox (Firefox) to run (2) solutions: Use document.formName.elements ["elementName"] 2

  • Based on jquery's ajax small example 2010-05-29

    Dedicated to those people too lazy to look jquery document. jquery Ajax commonly used method is $. ajax (),$. post (),$. get (), the latter two are based on a brief form of the previous method. Introduced here only $. Post () method. Use the followin

  • sqlplus common command - turn 2010-07-29

    show and the set command is used to maintain the two SQL * Plus system variables in order SQL> show all - View all 68 values of system variables SQL> show user - Display the current connected users SQL> show error - error SQL> set heading off

  • php array multidimensional array 2011-05-27

    On the array: PHP in the array is complex, and many other high-level language than in the array is more flexible. Array is an ordered array of variables, where each variable is called an element. Number or array can be associated, that is, the elemen

iOS 开发

Android 开发

Python 开发



PHP 开发

Ruby 开发






Javascript 开发

.NET 开发



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

processed in 0.204 (s). 13 q(s)