jquery lazy load
LazyLoad是一个Js编写的Jq插件,它可以延迟加载页面中的图片,在浏览器可视范围中的图片会被加载。
如何使用:LazyLoad依赖于Jquery,在html的结尾处 ,就是在</body>前。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lazyload.js"></script>
你必须改变图片的标签,图片的地址必须放到data-original属性上。给懒加载图片一个指定的class(例如:lazy)代码如下:
html:<img class="lazy" alt="" width="640" height="480" data-original="img/example.jpg" />
js:$(function() {
$("img.lazy").lazyload();
})
这会将所有图进行延迟加载
设置临界点
默认情况下只有图片出现在屏幕时才会加载,如果你想提前加载图片,那么可以设置threshold,这个属性的单位是px,不过赋值的时候不用带px ,呵呵。
设置事件来触发加载
$("img.lazy").lazyload({
event : "click"
});
使用特效
$("img.lazy").lazyload({
effect : "fadeIn"
});
jquery lazy load的更多相关文章
- jQuery Lazy Load 图片延迟加载
基于 jQuery 的图片延迟加载插件,在用户滚动页面到图片之后才进行加载. 对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度. 版本: jQuery v1.4.4+ jQuery ...
- jQuery Lazy Load图片懒加载
传送门:官网地址,jQuery Lazy Load v1.7.2下载,Github 使用方法: 1.引用js文件 <script src="jquery.js">< ...
- Lazy Load 图片延迟加载(转)
jQuery Lazy Load 图片延迟加载来源 基于 jQuery 的图片延迟加载插件,在用户滚动页面到图片之后才进行加载. 对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度. ...
- Lazy Load, 延迟加载图片的 jQuery 插件.
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- jQuery延迟加载插件(Lazy Load)详解
最 新版本的Lazy Load并不能替代你的网页.即便你使用JavaScript移除了图片的src属性,有些现代的浏览器仍然会加载图片.现在你必须修改你的html代 码,使用占位图片作为img标签的s ...
- 延迟加载图片的 jQuery 插件:Lazy Load
网站的速度非常重要,现在有很多网站优化的工具,如 Google 的Page Speed,Yahoo 的 YSlow,对于网页图片,Yahoo 还提供 Smush.it这个工具对图片进行批量压缩,但是对 ...
- Lazy Load, 延迟加载图片的 jQuery 插件 - NeoEase
body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...
- jQuery Wookmark Load 瀑布流布局实例演示
瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸统一的排版,每张图片都能完全展示,并错落有致,让人眼前一亮. 版本: jQuery v1.4.3+ jQuery Wookmark Load v1 ...
- jquery的load和get的区别
jquery的load把返回的数据放到指定的元素中,不是全局函数:jquery的get把返回的数据交给用户处理,是全局函数. load和get同样是jquery的ajax函数,load的实现,几乎等于 ...
随机推荐
- nltk 词性解析
转载链接: https://blog.csdn.net/pengjian444/article/details/81143983
- adjustResize模式下ExpandaleListView中输入框焦点错乱及布局底部的导航栏被顶在键盘上方的处理
为了更好的用户体验,煎熬了许久,得到这么个解决方案.在此记录下来,以供后来者参考. 第一部分 清单文件中组件activity的android:windowSoftInputMode属性值的含义: [A ...
- Kali Linux安装字典StarDict
Kali Linux安装字典StarDictStartDict是国外知名的字典框架,也可以加入国内翻译工具的字典.Kali Linux软件源提供该字典框架.用户需要安装qstardict软件包和词库 ...
- JAVA基础复习与总结<五> String类_File类_Date类
String类 .Java字符串就是Unicode字符序列,例如串“Java”就是4个Unicoe字符组成. .Java没有内置的字符串类型,而是在标准java类库中提供了一个预定义的类String, ...
- Git提交代码(要有GitHub账号)
分享一下Git提交模式代码(只是提交到GitHub仓库而已,没有其他的操作) 这个的前提是你已经安装了Node.js.Git 下面来看: 1. cd进入目录 2. 把当前目录变成git可以管理的仓 ...
- 《SpringMVC从入门到放肆》十三、SpringMVC数据校验
上一章,我们学习了SpringMVC的自定义类型转换器,但是如果转换后的数据传递到Controller的方法中,忽然发现有某些属性为Null了,这怎么办?我们需要一种有效的数据校验机制,来对数据进行有 ...
- 团队项目:Recycle
一.团队名字 地球保卫队(EPT) 二.团队阵容 1.项目部分 小组成员思维活跃,仅仅在一节课的时间里提出了n个颠覆软件开发界的思维的idea,最后在层层pk最后留下了八个惊世骇俗的想法.其中包括了要 ...
- (一) sublime安装和使用
1 下载安装sublime 可以破解也可以不破解 2 html基础架子自动生成插件Emmet的安装 3 Emmet 安装失败解决 4 快捷键设置和汇总 4 其他sublime插件汇总
- Java实验环境的搭建
一.下载并安装JDK 1.官网下载安装 打开浏览器,输入http://www.oracle.com/index.html点击进入下载: 点击—>Downloads—>选择Java(JDK) ...
- C# 窗体打开拖动到窗体的文件
private void Form3_DragEnter(object sender, DragEventArgs e) { if (e.Data.GetDataPresent(DataFormats ...