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 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
随机推荐
- 锋利的JQuery-认识Jquery
今天开始学习菜鸟的JQuery,这本书在一前看过一遍了,但是由于虽然看了,但是将近一年在工作中基本上没有用上,很是悲催,菜鸟想,用一到两个星期时间把这本书看一遍吧.就像菜鸟前面的jsdom一样,菜鸟写 ...
- java 参数传递是引用传递还是值传递？
JAVA的参数传递倒底是值传递还是引用传递,我觉得两种说法都没错,关键是看怎么理解“引用”和“引用传递”. (一)从编译原理的角度讲,所有那些无法通过形参来修改实参本身的传递机制都是“值传递”,在JA ...
- 关于C#控制台传递参数和接收参数
前言: 写了这么久程序,今天才知道的一个基础知识点,就是程序入口 static void Main(string[] args) 里的args参数是什么意思 ?惭愧... 需求: 点击一个button ...
- unity3d中获得物体的尺寸(size)
1:获得诸如Plane.Cube的size. 1):可以为它们添加Collider,然后使用XXX.collider.bounds.size;该方法获得的size和缩放比例有关,是一一对应的,缩 ...
- UVa 140 (枚举排列) Bandwidth
题意较复杂,请参见原题=_=|| 没什么好说的,直接枚举每个排列就好了,然后记录最小带宽,以及对应的最佳排列. STL里的next_permutation函数真是好用. 比较蛋疼的就是题目的输入了.. ...
- LeetCode Summary Ranges (统计有序数列范围)
题意:给出个有序不重复数列(可能负数),用缩写法记录这个数列. 思路:找每个范围的起始和结束即可. class Solution { public: vector<string> summ ...
- 【js与jquery】电子邮箱、手机号、邮政编码的正则验证
//验证邮政编码 $("#postcode").blur(function(){ //获取邮政编码 var postcode=$("#postcode").va ...
- 使用busybox制作rootfs
Build Busybox as a static binary(no shared libs),如果选择上,则busybox将以静态形式进行编译,否则将以动态方式编译.此外,还需要对交叉编译环境进行 ...
- Uva 796 Critical Links 找桥
这个题很简单,但是输入有毒,用字符串的我一直RE 然后换成这样瞬间AC #include <stdio.h> #include <string.h> #include < ...
- HDU 5536 Chip Factory 字典树+贪心
给你n个数,a1....an,求(ai+aj)^ak最大的值,i不等于j不等于k 思路:先建字典树,暴力i,j每次删除他们,然后贪心找k,再恢复i,j,每次和答案取较大的,就是答案,有关异或的貌似很多 ...