jquery implementation of image delay loading plugin

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.