jQuery Photo lazy loading

sponsored links
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  :

  • del.icio.us
  • StumbleUpon
  • Digg
  • TwitThis
  • Mixx
  • Technorati
  • Facebook
  • NewsVine
  • Reddit
  • Google
  • LinkedIn
  • YahooMyWeb

Related Posts of jQuery Photo lazy loading

  • Hibernate primary key strategy-sequence

    Today, the use of hibernate in the company encountered a troublesome problem, the use of hibernate when the primary key generation strategy set sequence, but always reported in the implementation could not get next sequence value of the error, then o ...

  • hibernate call stored procedure

    hibernate call stored procedure

  • hibernate using c3p0 connection pooling

    Private http://www.lifevv.com/tenyo/doc/20070605102040991.html c3p0 for open source's JDBC connection pool, with the release hibernate. This article describes how to use the hibernate configuration in c3p0. c3p0 connection pool configuration is v ...

  • Hibernate configuration parameters hibernate.hbm2ddl.auto

    Hibernate in the configuration file: <properties> <property name="hibernate.hbm2ddl.auto" value="create" /> </ properties> Parameter Description: validate load hibernate, the authentication to create a database t ...

  • Build flex + spring + blazeds + hibernate application

    Build flex + spring + blazeds + hibernate application First, set up the project blazeds 1, will blazeds.war extract to a directory, such as: myflex /; 2, set up java works were such as: MyFlex, in the orientation of selection create project from exis ...

  • Hibernate connection pool configuration

    Hibernate connection pool configuration <! - Jdbc -> <property name="connection.driver_class"> oracle.jdbc.driver.OracleDriver </ property> <property name="connection.url"> jdbc: oracle: thin: @ 10.203.14.132:15

  • hibernate generic generic DAO

    package org.lzpeng.dao; import java.io.Serializable; import java.util.List; import org.hibernate.Criteria; import org.hibernate.Query; import org.hibernate.criterion.Criterion; import org.springside.modules.orm.hibernate.Page; /** * * @version 2009-1-10 *

  • Struts2 + hibernate + spring problem user log in

    dao layer services layer action jsp <tr> <td align="center"> <b> user name: </ b> </ td> <td> <s: textfield name = "czyNumber" cssClass = "textstyle" theme = "simple" size = &q

  • Hibernate secondary cache

    Hibernate cache: 2-bit cache, also known as process-level cache or SessionFactory level cache, secondary cache can be shared by all of the session Cache configuration and the use of: Will echcache.xml (the document code in hibernate package directory ...

  • Hibernate's lazy strategy

    hibernate Lazy strategy can be used in: <class> tag, it can be true / false Tags can <PROPERTY> values true / false type of necessary tools to enhance <set> <list> can tag values true / false / extra <many-to-one> <on ...

blog comments powered by Disqus
Recent
Recent Entries
Tag Cloud
Random Entries