jquery implementation of image delay loading plugin

jquery implementation of image delay loading plugin:

In many sites, especially the picture station, are using the image delay loading effect, so that can effectively alleviate the pressure of the server, a bit natural self-evident, and we share a picture of the delay loading plug-ins, I hope to bring you some help.

The code is as follows:

<script type= "Text/javascript" > (function($) {$.fn.imglazyload=function(options) {varo=$.extend ({attr:' Lazy-src ', Container:window, event:' Scroll ', FadeIn:false, Threshold:0, Vertical:true},options), event=o.event, Vertical=o.vertical, Container=$ (O.container), Threshold=O.threshold,//convert jquery objects to DOM arrays for ease of operationElems=$.makearray ($ ( This)), Dataname= ' Imglazyload_offset ', OFFSET=vertical? ' Top ': ' Left ', SCROLL=vertical? ' ScrollTop ': ' ScrollLeft ', Winsize=vertical?container.height (): Container.width (), Scrollcoord=Container[scroll] (), DocSize=winsize+Scrollcoord; //deferred-loaded triggers    varTrigger={init:function(coord) {returncoord>=scrollcoord&&coord<= (DocSize +threshold); }, scroll:function(coord) {varscrollcoord=Container[scroll] (); returnCoord>=scrollcoord&&coord<= (winsize+scrollcoord+threshold); }, resize:function(coord) {varscrollcoord=container[SCROLL] (), Winsize=vertical?container.height (): Container.width (); returnCoord>=scrollcoord&&coord<= (winsize+scrollcoord+threshold);     }     }; varLoader=function(triggerelem,event) {varI=0, Iscustom=false, Istrigger,coord,elem, $elem, LAZYSRC; //custom events can only be triggered, no need to judge      if(event) {if(event!== ' scroll ' &&event!== ' resize ') {Iscustom=true; }       }       Else{Event= ' init '; }        for(; i < elems.length; i++) {Istrigger=false; Elem=Elems[i]; $elem=$ (elem); LAZYSRC=$elem. attr (o.attr); if(!lazysrc | | elem.src = = =lazysrc) {           Continue; }         //The offset value is obtained from the cache before the computed value is obtained in the cache .        //cache the calculated values to avoid reflow caused by repeated fetchesCoord =$elem. Data (Dataname); if(coord===undefined) {coord=$elem. Offset () [offset];         $elem. Data (Dataname, coord); } Istrigger= Iscustom | |trigger[Event] (coord); if(Istrigger) {//Loading PicturesELEM.SRC =lazysrc; if(O.fadein) {$elem. Hide (). FadeIn (); }           //Remove Cache$elem. Removedata (Dataname); //removes the DOM from the DOM arrayElems.splice (I--, 1 ); }       }       //Uninstall trigger event after all pictures are loaded      if( !elems.length) {if(Triggerelem) {Triggerelem.unbind (event, fire); }         Else{container.unbind (o.event, fire); } $ (window). Unbind (' Resize ', fire); Elems=NULL;     }     }; varFire =function(e) {loader ($ ( This), E.type);     }; //Binding Eventscontainer = Event = = = ' Scroll '? Container: $ ( This );     Container.bind (event, fire); $ (window). Bind (' Resize ', fire); //Initializeloader (); return  This; }; }) (JQuery); </script>

Implementation principle:

You need to save the real address of the picture in a custom attribute (the property name you play, here I use LAZY-SRC), and the image of the SRC attribute with a placeholder image to replace, this placeholder image is of course the smaller the better, because it will not be displayed in the page.

<src= "Images/placeholder.png"  lazy-src= "Images/realimg.jpg"  alt= ""/>

First, when the page starts to load, the browser gets the position of all the pictures in the current page and caches (gets the value of offset, the reflow of the page is raised), the visible area is computed, and the position of the picture appears in the visible area. Using JS to dynamically replace the SRC value in the image label with the real address of the picture, the picture that just appeared in the viewable area starts to load.

Secondly. When the user scrolls down the page, by JS again calculate whether there is a picture first appear in the visible area, if there is, just the SRC value of these images to replace, and start loading real pictures. To avoid memory leaks caused by repetitive operations, you need to unload the corresponding triggering events after all the pictures have been loaded.

At last. This article is to see the whole window as a large container, if you prefer, you can also set a small container in the page, in the small container can also be implemented in the image delay loading. Although the principle is simple, the application is diverse.

The original address is: http://www.51texiao.cn/jqueryjiaocheng/2015/0613/4219.html

The most original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=8672

JQuery-Implemented picture delay-loading plugin