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 ...
随机推荐
- Leetcode_Best Time to Buy and Sell Stock
Say you have an array for which the ith element is the price of a given stock on day i. If you were ...
- 红外 IR 协议原理分析
1.概述:对多种红外遥控器的信号进行分析,其发出的红外指令中,引导码各不相同,而且后面的控制指令也有较大差别,甚至指令码的位数也不相同,原因是这些红外设计没有遵守相同的红外标准.但是其基本思想是相同的 ...
- 关于Windows高DPI的一些简单总结(Window上一般默认是96 dpi 作为100% 的缩放比率)
我们知道,关于高DPI的支持, Windows XP时代就开始有了, 那时关于高DPI的支持比较简单, 但是从Vista/Win7 到现在Win8 /Win8.1, Windows关于高DPI的支持已 ...
- qmake和moc的功能(★firecat推荐★)
原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://devbean.blog.51cto.com/448512/355100 前面我们 ...
- Teach Yourself Scheme in Fixnum Days 6 recursion递归
A procedure body can contain calls to other procedures, not least itself: (define factorial (lambda ...
- java基础进阶:SQL的运用
SQL的基础的运用 /* --1.学生表 Student(S,Sname,Sage,Ssex) --S 学生编号,Sname 学生姓名,Sage 出生年月,Ssex 学生性别 --2.课程表 Cour ...
- linux虚拟机命令行模式下,某些命令显示乱码问题。
刚安装了linux虚拟机,使用vi命令试着修改IP配置,结果出现乱码.配置IP的文件内容本身没有乱码,主要是vi编辑的命令行的提示出现乱码,例如,按i是插入模式,结果底下出现乱码提升,不是提示插入. ...
- poj1185:炮兵阵地(状压dp)
也算是比较基础的状压dp了,跟做过的第二道比较又稍微复杂了一点 需要记录之前两行的状态.. 统计结果也稍有不同 另外还学习了一个得到一个整数二进制位 1 的个数的位运算方法 详见代码: #includ ...
- alert 在手机浏览器会显示网址,怎么能去掉这个网址
之前就看到有人发过这帖子,现在自己也遇到这问题了. 目前想到的一个解决方案,是用jquery的模拟的alert插件进行代替,可是找的几个插件都不能实现alert的阻塞功能.怎么破 ,具体解决方案如下: ...
- 单片机脚本语言-移植lua到stm32-MDK
Lua简单介绍 Lua[1] 是一个小巧的脚本语言.作者是巴西人.该语言的设计目的是为了嵌入应用程序中,从而为应用程序提供灵活的扩展和定制功能. Lua脚本能够非常easy的被C/C++ 代码调用, ...