jQuery Photo lazy loading

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  :
分类:Java 时间:2011-05-01 人气:149
分享到:
blog comments powered by Disqus

相关文章

  • JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载 2015-03-09

    以前对于JavaScript总是在用到的时候在页面上写几个函数,基本没考虑到函数的封装与重用,最近有个项目可能对于这方面要求有点高,所以就研究了下类似jQuery的封装 JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载 以前对于JavaScript总是在用到的时候在页面上写几个函数,基本没考虑到函数的封装与重用,最近有个项目可能对于这方面要求有点高,所以就研究了下类似jQuery的封装. 这里就图片等比缩放以及预加载的效果来尝试下,写写类似的JavaScript代码. 图

  • JavaScript in the closure (Reprinted) 2010-07-08

    Javascript Closures CODE (white-space: nowrap;). ScopeCh (white-space: nowrap; font-family: Courier, monospace;) Javascript Closures FAQ> FAQ Notes Introduction The Resolution of Property Names on Objects Assignment of Values Reading of Values Identi

  • JavaScript in the closure 2010-04-16

    Closure is a function call through the implementation of the environment returns a function object composition. This seemingly simple word, always let some people puzzled. First, let's look at a simple example of closure by the closure case we slowly

  • javascript:google 向上向下滚动特效,兼容IE6,7,8,FF 2013-10-21

    这个代码是我之前带网上找的,因为今天再次用到,所以记录下来,免得以后都找不到,我现在想去搜它的说明文档都搜不到! 2010最新全面兼容ie6,ie7,ie8,ff的CSS HACK写法 轮回?修真?神话 创意新作<岐山>首度公开 西游战记炫彩登场 1080P高清画面享受 开测前必读 <西游战记>新手问题合辑 呕血推荐 <西游战记>36大亮点纵览 1开测前必读 <西游战记>新手问题合辑 2开测前必读 <西游战记>新手问题合辑 [Ctrl+A 全选

  • Google map in JQuery Dialog 2010-06-02

    http://stackoverflow.com is a good site, many problems can find the answers here. When the dialog in JQuery google maps, when painting was found in how IE8 are displayed in the map does not come out (the map part is gray), Firefox, under all normal,

  • google Api javascript dynamic loading 2009-09-22

    google dynamic loading api can not only own the ajax loaded modules can also be loaded at the same time many of the three popular modules, such as jQuery, dojo, yui, etc.. This article has a way of dynamically loaded briefly. This dynamic loading is

  • Use google jsapi fast loading jquery library (dynamically increase the input and value) 2008-05-09

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> New Document </title> <script type="text/javascript" src="https://www.google.com/jsapi"></script>

  • google charts (chart) 2010-03-29

    google chart 1 <!-- copyright (c) 2009 Google inc. You are free to copy and use this sample. License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" &qu

  • The concept of Google Maps API 2010-04-20

    The concept of Google Maps API Welcome to the Google Maps API developer documentation! Google Maps JavaScript API lets you embed Google Maps in web pages. To use this API, you need to register to obtain the API key. After receiving API key, which can

  • Use google translation website 2010-09-10

    <div"width: 100%; margin-top: 8px; height:236px; "> <div"width:100%;"> <span> Free Translation Online </span> <span> <a href="#""$('#jqfy-box').hide();return false;""width:25px;

iOS 开发

Android 开发

Python 开发

JAVA 开发

开发语言

PHP 开发

Ruby 开发

搜索

前端开发

数据库

开发工具

开放平台

Javascript 开发

.NET 开发

云计算

服务器

Copyright (C) codeweblog.com, All Rights Reserved.

CodeWeblog.com 版权所有 黔ICP备15002463号-1

processed in 0.107 (s). 14 q(s)