jquery 延迟加载代码
<!--引入以下两个js文件-->
<script type="text/javascript" src="./js/jquery.min.js"> </script>
<script type="text/javascript" src="./js/jquery.lazyload.js"> </script> <!--初始化-->
<script>
$(function(){ // 在灰色占位图片被点击之前阻止加载图片
$("img.lazy").lazyload({
placeholder : "img/grey.gif",
event : "click"
}); $("ul img").lazyload({
placeholder :"vsli1.gif",
//当图片完全加载的时候, 插件默认地使用 show() 方法来将图显示出来. 其实你可以使用任何你想用的特效来处理
effect : "fadeIn",
threshold : 10
}); }); </script> <body>
<img class="lazy" src="./image/1.jpg" width="100" heigh="100" />
<ul>
<li><img src="./image/1.jpg" ></li>
<li><img src="./image/11.jpg" ></li>
<li><img src="./image/1.jpg" ></li>
<li><img src="./image/11.jpg" ></li>
<li><img src="./image/1.jpg" ></li>
<li><img src="./image/11.jpg" ></li>
<li><img src="./image/1.jpg" ></li>
<li><img src="./image/11.jpg" ></li>
<li><img src="./images/1.jpg" ></li>
<li><img src="./images/11.jpg" ></li>
<li><img src="./image/1.jpg" ></li>
<li><img src="./image/11.jpg" ></li>
<li><img src="./image/1.jpg" ></li>
<li><img src="./image/11.jpg" ></li>
<li><img src="./image/1.jpg" ></li>
<li><img src="./image/11.jpg" ></li>
<li><img src="./image/1.jpg" ></li>
<li><img src="./image/11.jpg" ></li>
<li><img src="./images/1.jpg" ></li>
<li><img src="./images/11.jpg" ></li>
</ul>
</body>
jquery 延迟加载代码的更多相关文章
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- HTML Select 标签选择后触发jQuery事件代码实例
页面设计原由: 因为很多客户不知道如何来到我们公司,领导想让我在微信公众号上面做一个链接,客户可以直接通过微信公众号打开地图并导航到我们公司的办公地点. 实现起来并不难,但由于公司有很多办事处,所以需 ...
- jquery常用代码集锦
1. 如何修改jquery默认编码(例如默认GB2312改成 UTF-8 ) 1 2 3 4 5 $.ajaxSetup({ ajaxSettings : { contentT ...
- jQuery概述,代码举例及最新版下载
jQuery是一个快速的,小巧的,具有强大功能的JavaScript库. 它的基本功能包括: 1)访问和操作DOM元素 2)控制页面样式(可以兼容各种浏览器) 3)对页面事件的处理 4)大量插件在页面 ...
- 电商网站jQuery放大镜代码
分享一款电商网站jQuery放大镜代码.这是一款基于jquery.elevatezoom插件实现的类似淘宝放大镜代码,提供40多种参数,可自由配置多种效果,适合电商或图片类网站使用.效果图如下: 在线 ...
- jquery倒计时代码
jquery倒计时代码<pre> <span id="day_show">0天</span> <strong id="hour_ ...
- 三种动态加载js的jquery实例代码另附去除js方法
!-- 这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getscript("test.js&quo ...
- jQuery延迟加载插件(Lazy Load)详解
最 新版本的Lazy Load并不能替代你的网页.即便你使用JavaScript移除了图片的src属性,有些现代的浏览器仍然会加载图片.现在你必须修改你的html代 码,使用占位图片作为img标签的s ...
- jquery延迟加载（懒加载）插件
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
随机推荐
- C#+SQL数据库备份和还原
使用前要导入SQLDMO.dll(在com组件中导入Microsoft SQLDMO Object Library即可) /// /// DbOper类,主要应用SQLDMO实现对Microsoft ...
- PHP 日期计算函数【差异天数】
function count_days($a,$b){ $a_dt=getdate($a); $b_dt=getdate($b); $a_new=mktime(12,0,0,$a_dt['mon'], ...
- 第二部分 overlay 架构初探
1 overlay可能支持的颜色格式/* possible overlay formats可能支持的颜色格式 */enum { OVERLAY_FORMAT_RGBA_8888 = HAL ...
- oracle 根据汉字返回拼音函数
参见戴明明的博客,oracle 根据汉字返回拼音函数,由于他的博客里没有提供完整的代码,研究了一个多小时,才弄出来: 上来贴代码吧.. --------------Type Definition CR ...
- 结构体 typedef struct hash_cell_struct hash_cell_t;
typedef struct hash_cell_struct hash_cell_t; struct hash_cell_struct{ void* node; /*!< hash chain ...
- mysql隔离机制
转 MySQL隔离级别 mysql-Innodb事务隔离级别-repeatable read详解(转)
- bzoj1857
三分的入门题,如果从AB上一点走到D是一个单峰函数从AB开始向CD传送带走的那个点也是一个单峰函数显然三分套三分 const eps=1e-5; var ax,ay,bx,by,cx,cy,dx,dy ...
- bzoj1855
让我们继续练习dp 首先这道题约束条件很多 但实际上方程还是很好写的,f[i,j]表示第i天时拥有j只股票的最大收益 令p=max(0,i-k-1) 上一次较交易 易得f[i,j]=max(f[i-1 ...
- bzoj1059: [ZJOI2007]矩阵游戏
二分图匹配. 补充,感觉之前说的不够详细,如果有完美匹配的话,每行都有一个对应的列,那么换来换去以后,对角线就全黑了... #include<cstdio> #include<alg ...
- UVa 101 (模拟) The Blocks Problem
题意: 有n个木块及n个木块堆,初始状态是第i个木块在第i个木块堆上.对应有四种操作,然后输出最终状态. 分析: 用一个vector<int>模拟一个木块堆,进行相应操作即可. #incl ...