jquery.lazyload用法
lazyload是jquery的插件,作为延迟加载图片,减压服务器压力。
如何使用:
先把
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.min.js" type="text/javascript"></script>放在body里面
修改html里面的img src为占位符1*1像素灰色的gif代码如下:
<img src="img/grey.gif" data-original="img/bmw_m1_hood.jpg" />
基本处理图片代码如下
$(function(){
$("img[data-original]").lazyload();
})
提前加载图片代码
$("img.lazy").lazyload({ threshold : 6 });数字可以修改
事件触发代码:
事件可以是任何 jQuery 时间, 如: click
和 mouseover
. 你还可以使用自定义的事件, 如: sporty
和 foobar
. 默认情况下处于等待状态, 直到用户滚动到窗口上图片所在位置. 在灰色占位图片被点击之前阻止加载图片, 你可以这样做:
$("img").lazyload({
placeholder : "img/grey.gif",
event : "click"
});
淡出效果代码:
$("img.lazy").lazyload({
effect : "fadeIn"
});
加载隐藏的代码:特别是做选显卡的是总是要隐藏图片这个就要给设置为skip_invisible : false不然就加载不出来
$("img[data-original]").lazyload({skip_invisible : false});
参考英文网站:http://www.appelsiini.net/projects/lazyload
jquery.lazyload用法的更多相关文章
- jQuery之jquery.lazyload.js插件用法
研究背景:网站中如果图片过多,就会因为加载图片而等待很长时间,此时我们就用到图片延时加载插件jquery.lazyload.js,这个插件可以让我们在向下滚动的时候加载图片.让网页首屏尽可能快的加载进 ...
- 延迟加载外部js文件,延迟加载图片(jquery.lazyload.js和echo,js)
js里一说到延迟加载,大都离不开两种情形,即外部Js文件的延迟加载,以及网页图片的延迟加载: 1.首先简单说一下js文件的3种延迟加载方式: (1)<script type="text ...
- 图片懒加载jquery lazyload
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>& ...
- 懒加载插件- jquery.lazyload.js
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- jQuery.lazyload
Lazy Load延迟加载也有的称为惰性加载,是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它 ...
- jquery.lazyload 实现图片延迟加载jquery插件
看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验.减少了页面加载的时间了,也减轻了服务器的压力,就查了下用JQuery.. 什么是ImageLazyLoad技术 在页面上图 ...
- jquery懒加载jquery.lazyload.js
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- jQuery lazyload 懒加载
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- jQuery $.each用法[转]
jQuery $.each用法 以下内容非原创,来自百度文库http://wenku.baidu.com/view/4796b6145f0e7cd18425368e.html 通过它,你可以遍历对象. ...
随机推荐
- 消息点击事件的响应链---hitTest:withEvent:方法
*当用户点击屏幕时,会产生一个触摸事件,系统会将触摸事件加入到 UIApplication管理事件队里中 *UIApplication 会从事件队列中取出最前面的事件进行分发以便处理,通常,先发送事件 ...
- 微软职位内部推荐-Senior SDE
微软近期Open的职位: Position: Senior SDE-- Mobile Products Android/iOS/WP Senior Developer Contact Person: ...
- nodejs笔记三--url处理、Query String;
URL--该模块包含用以 URL 解析的实用函数. 使用 require('url') 来调用该模块. 一.parse函数的基础用法 parse函数的作用是解析url,返回一个json格式的数组,请看 ...
- Netsharp快速入门(之10) 销售管理(插件、资源、业务建模)
作者:秋时 杨昶 时间:2014-02-15 转载须说明出处 第4章 销售模块开发 4.1 创建插件和资源 参考基础档案的开发 4.2 创建业务模型 Netsharp工具 ...
- 浅谈GitHub
Git 是一个面向开源及私有软件项目的托管平台,因为只支持Git作为唯一的版本库格式进行托管,故名GitHub. Gith是一个基于 git 的社会化代码分享社区,所谓 social coding.你 ...
- JavaScript对象进阶
要了解JavaScript对象,我们可以从对象创建.属性操作.对象方法这几个方面入手.概括起来,包括以下几模块: 1.创建对象 1.1 对象直接量 对象直接量是创建对象最简单的方式,由若干名/值对组成 ...
- VIM 技巧 (二)查找与替换
今天和大家分享下 对于 vim 中 查找与替换方法 例如有一篇文章.中英文不限制. 用户如果想查找其中的文字或单词 在 win系统的Notepad中一般都时 ctrl + F 去查询 而在 vim ...
- [百度空间] [原] 全局operator delete重载到DLL
由于很久没有搞内存管理了,很多细节都忘记了今天项目要用到operator delete重载到DLL,发现了问题,网上搜索以后,再对比以前写的代码,发现了问题:原来MSVC默认的operator new ...
- UML标准图(转载)
在前面的章节中,我们已经讨论过的构建和其他必要的UML元素.现在,我们需要明白的地方使用这些元素. 元素都可以以不同的方式,使一个被称为图的完整的UML图片,如:组件.所以这是非常重要的,要了解不同的 ...
- Codeforces Round #247 (Div. 2) C题
赛后想了想,然后就过了.. 赛后....... 我真的很弱啊!想那么多干嘛? 明明知道这题的原型就是求求排列数,这不就是 (F[N]-B[N]+100000007)%100000007: F[N]是1 ...