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: 




  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   


    placeholder : "img/grey.gif",  
    event : "click" 




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


     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  )


  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">
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  


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: @

  • 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 Entries
Tag Cloud
Random Entries