效果预览：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. junit测试，使用classpath和file 加载文件的区别

    用junit测试发现一个问题,怎么加载配置文件?一直都出现这样的错误 ERROR: org.springframework.test.context.TestContextManager - Caug ...

  2. SSISDB6：Operation

    SSISDB使用Operation表示对SSIS Project所做的任何操作,在执行一次Operation时,SSISDB会记录Operation的Message,当触发Event时,会记录Even ...

  3. C#设计模式系列：代理模式（Proxy）

    代理模式提供了一个中介控制对某个对象的访问.现实生活中,我们可能会用支票在市场交易中用来代替现金,支票就是账户中资金的代理. 1.代理模式简介 1.1>.定义 代理模式(Proxy)定义:代理模 ...

  4. BAT及各大互联网公司2014前端笔试面试题--JavaScript篇

    很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习js更是大有裨益. 而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正确, ...

  5. Windows 使用 Yeoman generators 创建 ASP.NET 应用程序

    上一篇:<Windows 搭建 .NET 跨平台环境并运行应用程序> 阅读目录: Install Node.js Install yeoman-generators Create ASP. ...

  6. Java多线程系列目录(共43篇)

    最近,在研究Java多线程的内容目录,将其内容逐步整理并发布. (一) 基础篇 01. Java多线程系列--“基础篇”01之 基本概念 02. Java多线程系列--“基础篇”02之 常用的实现多线 ...

  7. 改用C++生成自动化数据表

    改用C++生成自动化数据表 前面的文章中,我们讨论了使用一个基于.NET的第三方程序库来从程序中来生成数据表.在我看来,这整个思路是非常有用的,例如为显示测试结果.我经常会自己在博客中尝试各种像这样的 ...

  8. Xen之初体验：XenMotion、 StorageMotion、Site Recovery、Power Management 各种新、高级功能免费

    Xenserver 的新版本6.2现在已经全面开源,省掉了原有的序列号,也能免费体验曾经标题中的付费高级功能. 安装镜像:http://downloadns.citrix.com.edgesuite. ...

  9. 1Z0-053 争议题目解析699

    1Z0-053 争议题目解析699 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 699.Your database is using a default temporary ta ...

  10. DocX在C#中的基本操作方法

    用了一个星期把园子里2016年中有关.net的文章都看了,有些只是大致的看了一下,在看的同时也在记录一些通用的方法.发现有很多对NPOI的文档,主要是操作Excl的方法,却很少有关文档类型的方法. 在 ...