jQuery Photo lazy loading

May 1 posted in Java (RSS), comments.

Advertisements

jquery  Plug-ins to achieve picture lazy - jquery.lazyload seen in Taobao Products  ,  Image is loaded in the drop-down scroll bar, this is a very good user experience  .  Reduce page load time, but also reduce the pressure on the server  ,  Used to check the next  JQuery.. 

  What is ImageLazyLoad Technology   

      More pictures on the page when the page is bound to lead to open a large amount of data and server interaction  .  Especially for high-definition picture, accounting for several  M  Space. ImageLazyLoad technology is  ,  The image is currently visible screen incoming loads, not the visible page  (  Scroll down through the visible  )  The picture is not loaded, so the quality is bound to lead to speed improvement  . 


 

  How to achieve  ImageLazyLoad 




  One. Use  JQuery  Plug-in, plug-in name  : jquery.lazyload(7kb  Size  ),  Compressed  (3kb  Size  )







 

  Online compression  js http://closure-compiler.appspot.com/home

  Although the special effects are very cattle X  ,  But only with JQuery plug-in just a few code  ,  Use the following procedure  : 

 


1.  Import plug-JS   

 

<script src="jquery.js" type="text/javascript"></script>  
<script src="jquery.lazyload.js" type="text/javascript"></script>

2.  In your page add the following  javascript: 

 


$("img").lazyload(); 


 


  This will enable all of the pictures are lazy  . 

 



 


  Of course, there are several configuration options available plug set  . 

 


1.  Change  threshold 

 


$("img").lazyload({ threshold : 200 }); 

 


  The threshold set to 200 means that when images are not seen before  load 200  Pixels  . 

 


  

 


2.  Of course you can also set a placeholder image and load the custom event to trigger the event pictures   

 


$("img").lazyload({  
    placeholder : "img/grey.gif",  
    event : "click" 
}); 

 


  

 


3.  Effect parameters can be defined by defining some images display   

 


$("img").lazyload({  
     placeholder : "img/grey.gif",  
     effect : "fadeIn" 
}); 

 


   

 


LazyLoad(  Lazy loading  )  Technology is not only used in the delay of loading a web page picture, the data can also be  ,Google Reader  Search took pictures and Bing  
LazyLoad  Use the most of technology  : 

 

  Defect  :

1.  Conflict with Ajax technology  :

2.  Pictures of the lazy loading, highly experienced exceptionally high picture  ,  The problem appears to stop loading  :

3.  Non-standard students to write code to pay attention, no matter what the reasons for the  ,  If your page, img tag  height  Attribute is not defined, then I suggest you should not use  ImageLazyLoad

 



 

  We can use lazy loading techniques Taobao  :(2kb  Size  )
http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/imglazyload-min.js 

 

  Call the method is very simple  : 
<script src="http://a.tbcdn.cn/kissy/1.0.0/build/imglazyload/imglazyload-min.js" 
type="text/javascript"></script> <script type="text/javascript">// <![CDATA[KISSY.ImageLazyload();// ]]></script> 

 

  Note :  The script relies yahoo-dom-event, the page to load   yui 2.x,  You can also directly refer to the following address  :
<script src="http://kissy.googlecode.com/svn/trunk/third-party/yui2/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"></script> 

 


 

  Configuration parameters are as follows  :
<script type="text/javascript">
KISSY.ImageLazyload({
mod: "manual", //   Delay mode. Default   auto
diff: 200 //   Under the current screen image more than the distance began to lazy loading. Default picture outside the screen until the two lazy  
});
</script> 

 

manual   Mode, the need to manually load the page in the pictures to be delayed   src   Change the property name data-lazyload-src. Such as   SRP   Page after the baby list  20  A picture lazy loading. Output  ,html   Code  :