jQuery图片延迟加载插件
在一些图片较多的页面上,如果图片都一起加载网页的速度会比较慢,而且也浪费流量。
使用图片延时加载插件就解决这些问题。
方法:
引入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图片延迟加载插件的更多相关文章
- jQuery图片延迟加载插件jQuery.lazyload
插件描述:jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度.在某些情况下,它也能帮助减轻服务器负载. 使用方法 引用jquery和jquery.lazy ...
- 第一次自己写jquery图片延迟加载插件,不通用,但修改一下还是可以使用到很多页面上的
不断修改完善中…… /*! * jquery.lazyoading.js *自定义的页面图片延迟加载插件,比网上的jquery.lazyload简单,也更适合自己的网站 *使用方法: 把img 的cl ...
- JQuery图片延迟加载插件,动态获取图片长宽尺寸
以前的网站带宽小,没有特别多的大图,现在不同了,各种图片网站如同雨后春笋层出不穷.服务器是抗住了,但是客户端就有意见了,太多的图片必然导致页面加载缓慢,特别是有些table结构的站点更是如此.能否让图 ...
- jQuery图片延迟加载插件jquery.lazyload.js
在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...
- jQuery图片延迟加载插件:jquery.lazyload
----------------------------------------------------------------------------------------------- clas ...
- jQuery图片延迟加载插件jQuery.lazyload使用方法(转)
使用方法 1.引用jquery和jquery.lazyload.js到你的页面 <script src="jquery-1.11.0.min.js"></scri ...
- jQuery图片延迟加载插件jQuery.lazyload 的使用
使用方法 引用jquery和jquery.lazyload.js到你的页面 1 2 <script src="jquery-1.11.0.min.js"></sc ...
- 图片延时加载原理 和 使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
图片加载技术分为:图片预加载和图片延时加载. javascript图片预加载和延时加载的区别主要体现在图片传输到客户端的时机上,都是为了提升用户体验的,延时加载又叫懒加载.两种技术的本质:两者的行为是 ...
- jQuery图片延迟加载
这里延迟加载的意思是,拖动滚动条时,在图片出现在浏览器显示区域后才加载显示.在这之前全部图片都由一张图片代替.节省流量,减轻服务器负担. 效果展示 http://hovertree.com/texia ...
随机推荐
- JUnit使用Eclipse建立Test Suite - 就是爱Java
当JUnit有多个或所有的Test Case要执行,此时就需要Test Suite来管理众多的Test Case,利用Eclipse的整合开发环境,可以针对多个不相关的Test Case或Test S ...
- 【转】Ubuntu 10.04 LTS 的窗口控制按钮从左上角调整到右上角
原文网址:http://www.linuxidc.com/Linux/2010-05/26111.htm 升级到Ubuntu 10.04后最大的问题,是最小最大和关闭按钮,放到了左边.这叫Ubuntu ...
- 华为手机APK 汉语译名
华为桌面 删除前要找一个桌面程序代替短信息 不删(貌似自带短信会偷流量..猜测猜测.唉~暂时没办法)输入法 也是删除前要找到替代输入法,否则后果..... 同名的odex也删了,主体不见了留躯壳何用? ...
- bzoj3174 [Tjoi2013]拯救小矮人
Description 一群小矮人掉进了一个很深的陷阱里,由于太矮爬不上来,于是他们决定搭一个人梯.即:一个小矮人站在另一小矮人的 肩膀上,知道最顶端的小矮人伸直胳膊可以碰到陷阱口.对于每一个小矮人, ...
- 瑞柏匡丞谈中国移动app的国际进阶路
当今3.0互联时代,已然形成了一个移动化,互动化,全球化的完整体系.瑞柏匡丞也在常年与国内外客户的交流沟通中有了自己的些许见解. 国内的移动产业的发展已然非常迅速,但也正是因为各类企业的不断崛起,能够 ...
- HDU4453--Looploop (Splay伸展树)
Looploop XXX gets a new toy named Looploop. The toy has N elements arranged in a loop, an arrow poin ...
- 算法导论(第三版)Exercies2.2(插入排序)
2.2-1: Θ (n3) 2.2-2:插入排序 void selectionSort(int a[], int n) { int i, j, k, key; ; i<n-; i++) { k ...
- javaweb项目的优化
简单地来看一个浏览器用户访问的流程: 浏览器->服务器->返回结果显示 这么简单地看,可能想得到的优化手段很少,常见的可能就是优化sql,加快数据库处理:加个缓存,加快返回:使用静态文件, ...
- Hadoop 2、配置HDFS HA (高可用)
前提条件 先搭建 http://www.cnblogs.com/raphael5200/p/5152004.html 的环境,然后在其基础上进行修改 一.安装Zookeeper 由于环境有限,所以在仅 ...
- poj 1486 Sorting Slides(二分图匹配的查找应用)
Description Professor Clumsey is going to give an important talk this afternoon. Unfortunately, he i ...