效果预览：http://keleyi.com/keleyi/phtml/image/index.htm

使用方法：
1.导入JS插件
<script src="http://keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="http://keleyi.com/keleyi/phtml/image/jquery.lazyload.js" type="text/javascript"></script>
2.在你的页面中加入如下的javascript：

$("img").lazyload();

这将会使所有的图片都延迟加载。

当然插件还有几个配置项可供设置。

1.改变threshold

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

把阀值设置成200 意思就是当图片没有看到之前先load 200像素。

2.当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件
复制代码 代码如下:

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

3.可以通过定义effect 参数来定义一些图片显示效果
复制代码 代码如下:

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

LazyLoad(延迟加载)技术不仅仅用在对网页中图片的延迟加载，对数据同样可以，Google Reader和Bing图片搜索就把
LazyLoad技术运用的淋漓尽致；
缺陷：
1.与Ajax技术的冲突；
2.图片的延迟加载，遇到高度特别高的图片，会出现停止加载的问题；
3.写代码不规范的同学要注意了，不管由于什么原因，如果您的页面中，img标签的height属性未定义，那么我建议您最好不要使用ImageLazyLoad

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片延迟加载-柯乐义</title>
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://keleyi.com/keleyi/phtml/image/jquery.lazyload.js"></script>
</head>
<body>
jquery实现图片延迟加载效果
<a href="http://keleyi.com/a/bjac/et551617.htm" target="_blank">原文</a><br />
<img src="http://keleyi.com/keleyi/phtml/image/img/grey.gif" data-original="http://keleyi.com/keleyi/phtml/image/img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood keleyi.com" /><br />
<img src="http://keleyi.com/keleyi/phtml/image/img/grey.gif" data-original="http://keleyi.com/keleyi/phtml/image/img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side keleyi.com" /><br />
<img src="http://keleyi.com/keleyi/phtml/image/img/grey.gif" data-original="http://keleyi.com/keleyi/phtml/image/img/viper_1.jpg" width="765" height="574" alt="Viper 1 keleyi.com" />
<img src="http://keleyi.com/keleyi/phtml/image/img/grey.gif" data-original="http://keleyi.com/keleyi/phtml/image/img/viper_corner.jpg" width="765" height="574" alt="Viper Corner keleyi.com" /><br />
<img src="http://keleyi.com/keleyi/phtml/image/img/grey.gif" data-original="http://keleyi.com/keleyi/phtml/image/img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT keleyi.com" />
<img src="http://keleyi.com/keleyi/phtml/image/img/grey.gif" data-original="http://keleyi.com/keleyi/phtml/image/img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop keleyi.com" />

<script type="text/javascript" charset="utf-8">
$(function () {
$("img").lazyload({
effect: "fadeIn"
});
});
</script>
</body>
</html>

更详细请参考柯乐义http://keleyi.com/a/bjac/et551617.htm

jquery插件图片延时加载实例详解的更多相关文章

  1. jQuery插件图片懒加载lazyload

    来自XXX的前言: 什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的 交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术 ...

  2. 图片延时加载原理 和 使用jquery实现的一个图片延迟加载插件（含图片延迟加载原理）

    图片加载技术分为:图片预加载和图片延时加载. javascript图片预加载和延时加载的区别主要体现在图片传输到客户端的时机上,都是为了提升用户体验的,延时加载又叫懒加载.两种技术的本质:两者的行为是 ...

  3. 图片延时加载jquery.inview.js用法详解

    我们在网站上总能见到这样的效果,若是有图片,图片都是先用loading加载一小段时间,然后紧接着出来要显示的图片,即效果如下: v2_loading.gif,几秒钟时间过渡到v2_pic_01_s.j ...

  4. js插件---图片懒加载lazyload

    js插件---图片懒加载lazyload 一.总结 一句话总结:使用异常简单,src里面放加载的图片,data-original里面放原图片,不懂的位置去官网或者github找API就好. 1.laz ...

  5. js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用

    js插件---图片懒加载echo.js结合 Amaze UI ScrollSpy 使用 一.总结 一句话总结:图片懒加载echo.js结合 Amaze UI ScrollSpy 使用的效果就是:懒加载 ...

  6. jquery实现图片预加载

    使用jquery实现图片预加载提高页面加载速度和用户体,本就为大家详细分析jquery图片预加载的实现原理. 什么时候使用图片预加载? 如果页面使用了很多不是最初加载便可见的图片,有必要进行预加载: ...

  7. picLazyLoad 图片延时加载，包含背景图片

    /** * picLazyLoad 图片延时加载,包含背景图片 * $(img).picLazyLoad({...}) * data-original 预加载图片地址 * alon */ ;(func ...

  8. 使用jQuery实现图片懒加载原理

    原文:https://www.liaoxuefeng.com/article/00151045553343934ba3bb4ed684623b1bf00488231d88d000 在网页中,常常需要用 ...

  9. jQuery的图片懒加载

    jQuery的图片懒加载 function imgLazyLoad(options) { var settings = { Id: $('img'), threshold: 100, effectsp ...

随机推荐

  1. 初学者--bootstrap（五）JavaScript插件（上）----在路上（6）

    jQuery 插件为 Bootstrap 的组件赋予了“生命”.可以简单地一次性引入所有插件,或者逐个引入到你的页面中. 一:首先要确认的是,单个还是全部引入: JavaScript 插件可以单个引入 ...

  2. 探讨Js的事件的冒泡阶段

    近来看到了一个新的知识点叫Js的事件冒泡,因此决定自己来研究一番. 大家应该都知道,Js中的事件处理分为三个阶段,1:事件的捕获阶段,2:处于目标阶段,3:事件的冒泡阶段.那么什么是事件的捕获和冒泡呢 ...

  3. Use Qt in Debian for OpenCASCADE

    Use Qt in Debian for OpenCASCADE eryar@163.com Recently several OpenCASCADE enthusiasts want to buil ...

  4. MVC实用架构设计（三）——EF-Code First（5）：二级缓存

    前言 今天我们来谈谈EF的缓存问题. 缓存对于一个系统来说至关重要,但是是EF到版本6了仍然没有见到有支持查询结果缓存机制的迹象.EF4开始会把查询语句编译成存储过程缓存在Sql Server中,据说 ...

  5. Web APi之EntityFramework【CRUD】（三）

    前言 之前我们系统学习了EntityFramework,个人觉得有些东西不能学了就算完了,必须要学以致用,在Web API上也少不了增(C).删(D).改(U).查(R).鉴于此,我们通过EF来实现W ...

  6. 图的广度优先搜索（BFS）

    把以前写过的图的广度优先搜索分享给大家(C语言版) #include<stdio.h> #include<stdlib.h> #define MAX_VERTEX_NUM 20 ...

  7. 設置Linux保留物理內存並使用 （1）

    在Linux系統中可以通過memblock來設置系統保留物理內存,防止這些內存被內存管理系統分配出去. 作者: 彭東林 郵箱: pengdonglin137@163.com 平臺 硬件平臺: TQ24 ...

  8. jQuery-1.9.1源码分析系列（六） 延时对象应用——jQuery.ready

    还记不记得jQuery初始化函数jQuery.fn.init中有这样是一个分支 //document ready简便写法$(function(){…}) } else if ( jQuery.isFu ...

  9. WebView JS与RN进行通讯

    RN0.37终于官方增加了WebView与React Native的通讯,之前一真使用的是第三方控件React-Native-WebView-Bridge,但不是知道怎么回事这个第三方控件喊了很长时间 ...

  10. Python_Day_05 计数器(counter)，有序字典(OrderDict)，默认字典(defaultdict)，可命名元祖(namedtuple)，双向队列(deque)，单项队列(deuqe.Queue)

    Counter(计数器) 是一个字典的子类,存储形式同样为字典,其中存储的键为字典的元素,值为元素出现的次数,在使用之前我们需要先导入文件 import collections 初始化一个计数器 im ...