下载地址

使用说明

0. 准备工作

下载jQuery和lazyload 插件(地址如上)

1. HTML

引入jQuery库和lazyload插件

    <div id="imagesContainer"></div>
<!--<img class="lazy" data-original="img/example.jpg" width="750" height="450">-->
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script src="../../lib/jquery.lazyload.js"></script>

2. 编写JavaScript

  $(function () {

             var images = [
'https://unsplash.ict/750/450?image=55', // 错误的地址;不会返回图片
'https://unsplash.it/750/450?image=155',
'https://unsplash.it/750/450?image=255',
'https://unsplash.it/750/450?image=355',
'https://unsplash.it/750/450?image=455',
'https://unsplash.it/750/450?image=555',
'https://unsplash.it/750/450?image=655',
'https://unsplash.it/750/450?image=5'
],
i = images.length,
$container = $('#imagesContainer'),
placerhold = '../layzr.js/placerhold.gif', // 图片未加载前显示的图片,若不设置,将默认显示灰色
imgtemp; while (i--) {
imgtemp = images.shift();
$container.append('<img class="lazy" src="'+placerhold+'" data-original="' + imgtemp + '" width="750" height="450">')
} $('img.lazy').lazyload({
effect: 'fadeIn' // 自定义显示效果(jQuery effect)
, failure_limit: 10
, threshold: 200 // 当距离图片还有200像素的时候,就开始加载图片。
, event: 'scroll'
}); // 自定义触发事件
// $("img.lazy").lazyload({ event: "click" });
});

3.  一些注意事项

3.1 必须设置图片的大小(行内样式或外部CSS都可以),否则插件可能无法达到理想的效果

3.2 可以设置倒计时,在指定的时间后加载图片

使用jQuery lazyload 实现图片延迟加载的更多相关文章

  1. jquery.lazyload 实现图片延迟加载jquery插件

    看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验.减少了页面加载的时间了,也减轻了服务器的压力,就查了下用JQuery..   什么是ImageLazyLoad技术 在页面上图 ...

  2. JQuery LazyLoad实现图片延迟加载-探究

    对于大量图片的网站,图片延迟加载是提高速度和性能的好方法. 目前图片延迟加载主要分两大块,一是触发加载(根据滚动条位置加载图片):二是自动预加载(加载完首屏后n秒后自动加载其他位置的图片).大体常用的 ...

  3. jquery.lazyload.js图片延迟加载

    转:http://www.jb51.net/article/50273.htm 这篇文章主要介绍了Jquery图片延迟加载插件jquery.lazyload.js的使用方法,需要的朋友可以参考下   ...

  4. jquery.lazyload.js图片延迟加载(懒加载)--转载

    一.插件介绍 jquery.lazyload.js 是一个用 JavaScript 编写的jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动 ...

  5. jquery.lazyload.js 图片延迟加载

    当做网页的时候,特别是整个网页展示图片较多的时候,用到图片延迟效果是很好的 使用方法也非常简单. 1.在网页任何位置(一般是在</body>前面)加上如下代码(注意<script&g ...

  6. 使用jquery插件实现图片延迟加载技术(懒加载)

    有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...

  7. jQuery Lazy Load 图片延迟加载

    基于 jQuery 的图片延迟加载插件,在用户滚动页面到图片之后才进行加载. 对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度. 版本: jQuery v1.4.4+ jQuery ...

  8. 一个简单而实用的JQ插件——lazyload.js图片延迟加载插件

      前  言 Cherish 看多了炫酷的插件之后再来看这么一个小清新的东西,是不是突然感觉JQ插件感觉很友好了,简单强大最重要的是实用. 这篇文章将详细讲解一下lazyload.js的用法 lazy ...

  9. 使用jquery插件实现图片延迟加载--懒加载技术

    原文链接:http://www.cnblogs.com/lei2007/archive/2013/05/31/3110725.html 感谢作者.以下为原文,备忘仅供自己学习. 第一:lazyLoad ...

随机推荐

  1. [Functional Programming Monad] Map And Evaluate State With A Stateful Monad

    We explore our first stateful transaction, by devising a means to echo our state value into the resu ...

  2. Web应用——驾培管理系统之个人管理(作者:小圣)

    Web应用--驾培管理系统之个人管理(作者:小圣) 本节博文旨在实现本次Web应用的个人管理功能.能够在登陆后 查看并改动个人信息或者进行password改动.同一时候,在输入的时候进行表单验证,验证 ...

  3. 【BIEE】19_不齐整维和越级维

    不齐整维:没有子节点的维度 越级维:层级维度出现断裂,则称为越级维 下图我们就可以清晰的看出: 首先,我们将表导入到资料库做好与事实表的关联后并建立相应维 以下是按照一般维度创建维后的结果 创建完成之 ...

  4. Ruby 第一行代码

    main.rb #=猜数字 #这是一个简单的猜数字游戏 #==玩法 #随机生成一个『1,100』的自然数.会提示大小 class GuessNum def playGame wrongInt = tr ...

  5. 门窗ERP——让门窗幕墙加工更简单

    系统特点: 本系统包括:生产销售.采购.库存.财务模块 型材按重量算成本,玻璃按面积算成本 单据采用推送的方式推进单据流程,层层递进严格把握管理流程.保证数据的严密.严谨性. 销售订单支持门窗.幕墙. ...

  6. lucene: IO/FileNotFoundException:(Too many open files) 查询异常解决

    http://stackoverflow.com/questions/6210348/too-many-open-files-error-on-lucene   baidu zone - 为什么Luc ...

  7. Python课程之字典

    字典(dict) 一.定义:字典类型在其他语言中又称为map,是一种映射类型,并且{key:value}无序,其关键字必须为不可变类型(如:元组/字符串),在同一个字典中关键字必须互不相同(若出现相同 ...

  8. JQuery选择器大全 前端面试送命题:面试题篇 对IOC和DI的通俗理解 c#中关于协变性和逆变性(又叫抗变)帮助理解

    JQuery选择器大全   jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement")    选择id值等于myElement的元素 ...

  9. CKEditor的安装与基本使用(JSP)

    文章分类:Web前端 一.下载CKEditor 1. 直接下载地址.当前最新版本号为3.5: http://download.cksource.com/CKEditor/CKEditor/CKEdit ...

  10. jQuery校验 表单验证

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...