The implementation method of jquery image delay loading effect

The first is to load an empty string, and if you set the IMG src to an empty string, you may get unexpected results.
For example, in the http://xxx/test.htm will occur as follows:
IE will produce a relative address of the request, namely: http://xxx/
Safari/chrome will produce the current page address request, namely: Http://xxx/test.htm
Opera/firefox does not produce a request

Instance

code is as follows

copy code

<div>   <script type= "Text/javascript" // Limit load range from 2nd to 12th Var index_n=1; X=0 $ (document). Ready (function () { $ (window). Scroll (function () { br> x + +; if (x%3==0) { ///scrolling height more than 3 times, load picture $ (". Imgleft img:eq (" +index_n+) "). each (function () { $ (this). attr (" src ", $ (this). attr ("original")); }); index_n++ } //Limit load range from 2nd to 12th end if (index_n==13) { $ (window). Unbind ("scroll"); return; } }); }); </script>

Do not know the number of times the mouse scroll sent is the same, so the possible mouse will be incompatible

using jquery imageslazyload to realize picture delay loading effect

"Get Picture"
First define the filter function as a filtering procedure:

code is as follows	copy code
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 to filter out the desired collection of pictures:

The code is as follows	Copy Code
This._elems = $ $A. Filter ( Opt.images | | Container.getelementsbytagname ("img"), filter );

If you want to customize the picture collection to be set in the images property of the optional parameters of the program, the IMG element is automatically fetched from the container as a collection of pictures.
The filter here is actually a wrapper that filters the style CLS, obtains the SRC method getsrc, and occupies the bitmap holder three parameters _filter filter.
In the _filter program, the collection of pictures is filtered and sorted.
If you customize the class filter style, the pictures that do not correspond to the styles are automatically excluded:

The code is as follows	Copy Code
if (ClassName && ("" + Img.classname + ""). IndexOf ("" + ClassName + "") = = 1) return false;

Then use GETSRC to get the original address, that is, the actual picture address to display.
If there is a custom getsrc will be used preferentially.
If not, get the _attribute custom attribute from the original address by saving it from the element.
Finally, it is obtained directly from the SRC attribute of the element.
And then excluding SRC does not exist:

The code is as follows	Copy Code
if (!SRC) return false;

Note that processing the original address is the case of the element's current src:

The code is as follows	Copy Code
if (src = img.src) { if (Img.complete | | $ $B. Chrome | | $ $B. Safari) return false; Img.removeattribute ("src"); }

If complete is true, the picture is already loaded and can be excluded;
If you are a chrome or safari, you cannot cancel the current load, so it is also excluded (see the HTTP request section of the picture).
Otherwise, remove the SRC attribute with RemoveAttribute to cancel the current load of the picture.
If you set the holder to occupy the bitmap, reset the picture src:

The code is as follows	Copy Code
if (holder) {img.src = holder;}

Finally, the original address is recorded in the _attribute custom attribute of the element:
Img.setattribute (This._attribute, SRC);

Once you've filtered through the image elements, you'll get a collection of pictures to load.

"Picture Load"
Imageslazyload compared to Lazyload, has implemented the _onloaddata loader, do not need to define their own load.
In the _onloaddata program, it is mainly used to display pictures.
First, use the _hasattribute method to determine whether there are _attribute custom attributes.
This is judged in the _hasattribute method:

The code is as follows	Copy Code
This._hasattribute = $ $B. IE6 | | $ $B. IE7 ? Function (IMG) {return attribute in IMG;} : Function (img) {return Img.hasattribute (attribute);};

Because Ie6/7 and other browsers on attribute and property understanding of different, so to separate processing, detailed reference to the attribute/property here.
In order to ensure compatibility, the program takes precedence over custom attributes by using attribute methods.
When IMG has _attribute custom attributes, use GetAttribute to get the original address and set up the IMG src to remove the custom attribute with RemoveAttribute.
The significance of the removal is that when multiple instances use the same element, it is guaranteed that the picture will not load repeatedly after loading, that is, to prevent conflicts between instances.

Instance

The code is as follows

Copy Code

var imageslazyload = $$.wrapper (function (options) { This._initialize (options); Exit if there are no elements if (This.isfinish ()) return; Initialization mode settings This._initmode (); For the first time trigger This.resize (TRUE); }, Lazyload); $$.extend (Imageslazyload.prototype, { Initialization program _initialize:function (options) { Lazyload.prototype._initialize.call (this, [], options); To set the child class properties var opt = this.options; This.onload = Opt.onload; var attribute = This._attribute = Opt.attribute; Set 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 ); method to determine whether a property has been loaded This._hasattribute = $ $B. IE6 | | $ $B. IE7 ? Function (IMG) {return attribute in IMG;} : Function (img) {return Img.hasattribute (attribute);}; }, Set default Properties _setoptions:function (options) { Return Lazyload.prototype._setoptions.call (this, $$.extend ({//default value images:undefined,//Picture Collection attribute: "_LAZYSRC",//Save the custom attribute of the original address Holder: "",//occupied bitmap ' Class ': ',//filter style getsrc:undefined,//get the original address program Onload:function () {}//execution at load time }, $$.extend (options, { Onloaddata:this._onloaddata }))); }, Filter to organize picture objects _filter:function (CLS, GETSRC, Holder, IMG) { if (CLS && img.classname!== CLS) return false;//exclusion style does not correspond to Get the original address var src = getsrc (img); if (!SRC) return false;//excludes SRC that does not exist if (src = img.src) { Exclude loaded or unable to stop loading if (Img.complete | | $ $B. Chrome | | $ $B. Safari) return false; Img.removeattribute ("src");//Remove SRC } if (holder) {img.src = holder;} Record the original address with the custom attribute Img.setattribute (This._attribute, SRC); return true; }, Show pictures _onloaddata:function (IMG) { var attribute = This._attribute; if (This._hasattribute (img)) { IMG.SRC = Img.getattribute (attribute); Img.removeattribute (attribute); This.onload (IMG); } } });