Jquery.imglazyload Picture Lazy Load Component

First, the preface

When too many pictures are requested in a page, and the picture is too large, the speed of the page access is very slow, the user experience is very unfriendly; use the picture lazy load, you can reduce the pressure on the server, increase the number of pages visited, here is the main summary of my own write the picture lazy load components Jquery.imglazyload Use this component to set a IMGLAZYLOAD-SRC property in the IMG tag to store the picture address.

Second, the application example demo

/**  * component:imglazyload 2013/12/12 hua zi yjh  * invoking:jQuery.imgLazyLoad (options)  *  &NB sp; //config object     options = {        container: ' Body ',  & nbsp;           //peripheral containers, default body          tabitemselector: ',           / TAB Switch Panel selector         carouselitemselector: ',       //Picture Carousel Panel Selector         attrname: ' imglazyload-src '     / /Picture Address Properties         diff:300        
              //Pre-loaded pixel    }  *  */

Picture Wheel lazy Loading: http://miiee.taobao.com
tab Toggle Picture Lazy Load: http://miiee.taobao.com/main.htm
Browser scrolling picture lazy load: http://miiee.taobao.com/themes/theme_151.htm

third, design ideas

1, processing browser pull down scrolling

Compare $ (window). scrolltop + $ (window). Height () and Img.offset (). Top value, when the picture is in the browser window, start loading the picture

2. Handle tab switching and picture carousel

In processing tab switching and picture Carousel, the component provides a function Handleimgload for event handling, parameter idx:

This parameter is for the picture carousel and is the index of the next round of the carousel, preload all the pictures in the next round of the Carousel panel
For tab switching, is the index of the tab item to load all the pictures in the currently displayed tab

3, selector processing

3.1. The processing of the scrolling Pull-down selector

In the configuration object there is a attrname, is to keep the picture address of a property selector: Img[config.attrname];

Second, the picture is displayed, if hidden, then do not load pictures, selector for: img[config.attrname]:visible;

Once again if the picture has been loaded, add a img-loaded classname to it, in order to filter the loaded picture, the selector is: Img[config.attrname]:visible:not (. img-loaded);

Finally, if a page uses multiple components, the first time use, when the Configuration object container as the body child element, the second time should filter the previous container matching elements in the picture,
In turn, the selector is: Img[config.attrname]:visible:not (. img-loaded): Not (JQuery.imgLazyLoad.selectorCache)

3.2, the tab switch, the picture wheel broadcast selector processing

There are tabitemselector or Carouselitemselector in the configuration object, and the picture in the current tab or next round of the Carousel panel is obtained by combining the arguments of the event handler function idx
Selector: TABITEMSELECTOR:EQ (IDX) img or CAROUSELITEMSELECTOR:EQ (IDX) img

If idx = = undefined, selector is: tabitemselector:visible img or CAROUSELITEMSELECTOR:EQ (0) img
I'm basing myself on the jquery component I wrote myself.

IV. Component Source code

$.extend ({    imglazyload:function (options) {        var config =
{                container: ' Body ',
                tabitemselector: ',                 Carouselitemselector : ',                 attrname: ' Imglazyload-src ',                
Diff:0            };

        $.extend (config, options {});         var $container = $ (config.container),              offsetobj = $container. ofFset (),             Compareh = $ (window). Height () + $ (window) . scrolltop ()            //Judge whether the container is a body child element              bl = $.contains (document.body, $container. Get (0)),             //filter image in cache container              notimgselector = JQuery.imgLazyLoad.selectorCache? ': Not (' + JQuery.imgLazyLoad.selectorCache + ') ': ',              Imgselector = ' img[' + config.attrname + ']:visible ' + notimgselector,              $filterImgs = $container. Find (Imgselector),             //For blocking event handling             IsstopeventhAndle = False,                         /Whether automatic lazy loading, when true, bind scrolling events         

    isautolazyload = false;        //cache container for body child element picture Selector         JQuery.imgLazyLoad.selectorCache = bl? (JQuery.imgLazyLoad.selectorCache?) (JQuery.imgLazyLoad.selectorCache + ', ' + Config.container + ' img '): Config.container + ' img '): JQuery.imgLazyLoad.sel

Ectorcache;         function Handleimgload (idx) {             if (isstopeventhandle) {         
       return;            }             /**              processing tab switch, Picture carousel, when processing $filterimgs, there is no filter img:not (. img-loaded), because just in one panel,              there are other panels, if triggered again, May be $filterimgs.length to 0, so you can only judge the filtered picture length            in the perimeter container   */                         if ($container. Find (' Img:not (. img-loaded) '). Length = = 0) {    
            Isstopeventhandle = true;            }        
     var itemselector = Config.tabitemselector Config.carouselitemselector ';             if (itemselector) {                 if (typeof idx!== undefined && idx >= 0) {     &N bsp;              $filterImgs = $container. Find (
itemselector). EQ (idx). FIND (' img ');                }                  else {                     if (Itemselector = = Config.carouselitemselector) {                         $filterImgs = $container. Find (Itemselector)-eq (0).
Find (' img ');                     }                     else {                         $filterImgs = $
Container.find (Itemselector + ': Visible '). Find (' img ');                     }                }             }              else {                $ Filterimgs = $filterImgs. Not ('. img-loaded '); Auto lazy load, filter loaded pictures                
Isautolazyload = true;            }            ///When the location of the peripheral container changes, need to update          

   offsetobj = $container. Offset ();             if ($filterImgs. length > 0) {                 $filterImgs. Each (function idx, Elem) {                     var $target = $ (elem),                          targettop = $target. Offset (). Top,                       

   VIEWH = $ (window). Height () + $ (window). scrolltop () + Config.diff;                     if (BL) {                         $target. attr (' src ', $target. attr (Config.attrname)).
Removeattr (Config.attrname). addclass (' img-loaded ');                     }                     //content in Windows                      if (Viewh > Targettop) {                         $target. attr (' src ', $target. attr (
Config.attrname)). Removeattr (Config.attrname). addclass (' img-loaded ');                    }                });            }              else {                //Handling scrolling Events                
Isstopeventhandle = true;                 $ (window). Unbind ('
Resize Scroll ', handleimgload);

           }        }
        handleimgload ();         if (isautolazyload) {        
    $ (window). Bind (' Resize scroll ', handleimgload);        }        //Provide event handler function         return {             Handleimgload:handleimgload   

     }    }}); Save the picture selector under the container of non-body child elements JQuery.imgLazyLoad.selectorCache = ';

v. Instance application code

Carousel Picture Lazy Load (function () {    var imglazyloadobj = $.imglazyload ({      & nbsp Container: ' #first-block-switch ',         carouselitemselector: '.
Switch-content li '    });
    $.switchable ({        wrapselector: ' #first-block-switch ',         contentselector: '. Switch-content ',          prevbtnselector: '. Prev ',         nextbtnselector: '. Next ',          triggerselector: '. Switch-nav ',         Autoplay:true,         duration:300,          interval:3000         handleImgLoad:imgLazyLoadObj.handleImgLoad  
  });

}()); Browser scrolling lazy Load $.imglazyload ({diff: 300});