在一些图片较多的页面上,如果图片都一起加载网页的速度会比较慢,而且也浪费流量。

使用图片延时加载插件就解决这些问题。

方法:

引入jquery和插件文件

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

图片代码设置

<img class="lazy" src="未加载前的图片地址" original="要显示的图片地址">

js调用

$("img.lazy").lazyload();

Lazyload属性:

threshold:值为number,图片离屏幕多少像素时开始提前加载;

event:值为String,使图片显示的事件,支持jQuery的所有事件,也可以是自定义事件。如:设置event为click,则需要点击占位符图片才能让图片显示;

effect:值为String,图片显示的效果,默认值为show。支持jQuery的fadeIn, slideDown;

container:值为String,使某容器内的使用延迟加载,容器内需要有滚动条;

$("img.lazy").lazyload({
threshhold:100,
effect:"fadeIn"
});

jQuery图片延迟加载插件的更多相关文章

  1. jQuery图片延迟加载插件jQuery.lazyload

      插件描述:jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度.在某些情况下,它也能帮助减轻服务器负载. 使用方法 引用jquery和jquery.lazy ...

  2. 第一次自己写jquery图片延迟加载插件,不通用,但修改一下还是可以使用到很多页面上的

    不断修改完善中…… /*! * jquery.lazyoading.js *自定义的页面图片延迟加载插件,比网上的jquery.lazyload简单,也更适合自己的网站 *使用方法: 把img 的cl ...

  3. JQuery图片延迟加载插件,动态获取图片长宽尺寸

    以前的网站带宽小,没有特别多的大图,现在不同了,各种图片网站如同雨后春笋层出不穷.服务器是抗住了,但是客户端就有意见了,太多的图片必然导致页面加载缓慢,特别是有些table结构的站点更是如此.能否让图 ...

  4. jQuery图片延迟加载插件jquery.lazyload.js

    在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...

  5. jQuery图片延迟加载插件:jquery.lazyload

    ----------------------------------------------------------------------------------------------- clas ...

  6. jQuery图片延迟加载插件jQuery.lazyload使用方法(转)

    使用方法 1.引用jquery和jquery.lazyload.js到你的页面 <script src="jquery-1.11.0.min.js"></scri ...

  7. jQuery图片延迟加载插件jQuery.lazyload 的使用

    使用方法 引用jquery和jquery.lazyload.js到你的页面 1 2 <script src="jquery-1.11.0.min.js"></sc ...

  8. 图片延时加载原理 和 使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)

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

  9. jQuery图片延迟加载

    这里延迟加载的意思是,拖动滚动条时,在图片出现在浏览器显示区域后才加载显示.在这之前全部图片都由一张图片代替.节省流量,减轻服务器负担. 效果展示 http://hovertree.com/texia ...

随机推荐

  1. 疯狂delphi - 朱建强 (一些小例子很实用,也是我所关心的几个问题)

    疯狂delphi - 朱建强 (一些小例子很实用,也是我所关心的几个问题) Android实例-获取安卓手机WIFI信息(XE8+小米2)http://www.cnblogs.com/FKdelphi ...

  2. 在微软平台上运行 SAP 应用程序

     本博客介绍了在微软平台上运行 SAP 应用程序的相关信息,作者在基于微软平台使用 SAP 方面有着数十年经验. 发布关于 Azure 的 SAP 说明 几个月前,SAP 针对适用于 SAP 软件 ...

  3. 动态规划——min/max的单调性优化总结

    一般形式: $max\{min(ax+by+c,dF(x)+eG(y)+f)\},其中F(x)和G(y)是单调函数.$ 或 $min\{max(ax+by+c,dF(x)+eG(y)+f)\},其中F ...

  4. Temporary failure in name resolution

    公司搬家,在一台测试机上执行git clone,出现错误 ssh: Could not resolve hostname **: Temporary failure in name resolutio ...

  5. Window的匿名Closing 事件

    group.Closing += (sender, e) => { try {   Code here } } catch (Exception ex) { Exception here } } ...

  6. jQuery----blur()方法

    当元素失去焦点时发生 blur 事件. blur() 函数触发 blur 事件,或者如果设置了 function 参数,该函数也可规定当发生 blur 事件时执行的代码. 提示:早前,blur 事件仅 ...

  7. RPG JS跨平台测试

    RPG JS虽然说是跨平台的,但是在具体的测试中效果并不理想. 以官方提供的Demo为例 问题一 手机的屏幕太小,导致画面上的人物都很小,连点击都很不准确.在9寸的平板上才可以看得比较清楚. 问题二 ...

  8. MVC4 成员资格、 身份验证

    SimpleMembership,成员资格提供程序. 通用的提供者和新的 ASP.NET 4.5 Web 窗体和 ASP.NET MVC 4 模板 ASP.NET MVC 4 互联网模板中添加一些新的 ...

  9. FLEX中Tree默认展开全部节点

    这里分两种情况,一种是数据源在MXML文件里,如: <mx:XML id="treeXML" format="e4x"> <root> ...

  10. NSString属性什么时候用copy,什么时候用strong?【转】

    转自:http://www.cocoachina.com/ios/20150512/11805.html. 我们在声明一个NSString属性时,对于其内存相关特性,通常有两种选择(基于ARC环境): ...