JQuery.lazyload 图片延迟加载
1.引入 jquery.lazyload.js
2. 延时加载的方式
<script type="text/javascript">
$(function() {
$("img").lazyload({
effect : "fadeIn"
});
});
</script>
3. 把阀值设置成200 意思就是当图片没有看到之前先load 200像素。
$(“img”).lazyload({ threshold : 200 });
4. 通过设置占位符图片和自定事件来触发加载图片事件。如 event :sporty 和 event : foobar。默认情况下处于等待状态, 直到用户滚动到窗口上图片所在位置. 在灰色占位图片被点击之前阻止加载图片。
$("img").lazyload({
placeholder : "img/grey.gif",
event : "click"
});
5. 带滚动条的 DIV 元素. 你要做的只是将容器定义为 jQuery 对象并作为参数传到初始化方法里面.
CSS:
#container {
height: 600px;
overflow: scroll;
}
JavaScript 代码:
$("img").lazyload({
placeholder : "img/grey.gif",
container: $("#container")
});
JQuery.lazyload 图片延迟加载的更多相关文章
- 关于lazyload图片延迟加载简单介绍
LazyLoad大家再熟悉不过的一个jquery插件了,它可以延迟加载长页面中的图片. 也就是说在浏览器可视区域外的图片不会被载入,直到用户将页面滚动到它们所在的位置才会加载并显示出来,这和图片预加载 ...
- jquery Loading图片延迟加载特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery实现图片延迟加载
html: <img src ="占位图路径" data-original="真实图片路径" /> js: $("img").l ...
- Jquery.ScrollLoading图片延迟加载技术
关于分屏加载图片,像天猫.京东等电商图片较多页面很长,就采用了延迟加载技术. 目前很流行的做法就是滚动动态加载,显示屏幕之外的图片默认是不加载的, 随着页面的滚动,显示区域图片才被动态加载. 原理其实 ...
- lazyload 图片延迟加载
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery前端插件以及图片延迟加载
插件名称 用途 插件官网地址 fontawsome CSS图标插件 http://fontawesome.io easyui 基于jQuery的用户界面插件集合 http://www.jeasyui. ...
- jQuery图片延迟加载插件jQuery.lazyload
插件描述:jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度.在某些情况下,它也能帮助减轻服务器负载. 使用方法 引用jquery和jquery.lazy ...
- [转载]jQuery.lazyload详解 - 图片延时加载
jQuery实现图片延迟加载,不知道是否可以节省带宽呢?有人知道吗? 这究竟只是一个视觉特效还是真的能延迟加载减少服务器的请求呢? <script type="text/javascr ...
- jQuery Lazy Load 图片延迟加载
基于 jQuery 的图片延迟加载插件,在用户滚动页面到图片之后才进行加载. 对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度. 版本: jQuery v1.4.4+ jQuery ...
随机推荐
- python 3.6 urllib库实现天气爬取、邮件定时给妹子发送天气
#由于每天早上要和妹子说早安,于是做个定时任务,每天早上自动爬取天气,发送天气问好邮件##涉及模块:#(1)定时任务:windows的定时任务# 配置教程链接:http://b ...
- 前端备忘录--JQuery选择器
基本选择器 基本选择器是最常用的选择器,也是最简单的选择器. $("#test") //选取id为test的元素 $(".test") //选取class为te ...
- 剑指Offer——当当+搜狐+好未来笔试题+知识点总结
剑指Offer--当当+搜狐+好未来笔试题+知识点总结 情景回想 时间:2016.9.21 15:00-21:00 地点:山东省网络环境智能计算技术重点实验室 事件:当当笔试.搜狐笔试.好未来笔试 3 ...
- 赵雅智:service与訪问者之间进行通信,数据交换
服务类 中间人:service服务中的bind对象 创建中间人并通过onBinder方法的return暴露出去 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQ ...
- 自己手写WEB程序框架并执行
1.新建目录,起名MyWeb 2.目录下,新建两个目录 WEB-INF, META-INF,,还能够新建一些jsp,html文件 ,如 index.html 3在WEB-INF中必须存在一个文件WEB ...
- kafka入门样例 for java
1,生产者 import java.util.Properties; import kafka.javaapi.producer.Producer; import kafka.producer.Key ...
- 自学Python2.5-基本数据类型-set集合
Python set集合 一. set集合概述 ①set集合,是一个无序且不重复的元素集合.②集合对象是一组无序排列的可哈希的值,集合成员可以做字典中的键.③集合支持用in和not in操作符检查成员 ...
- Django的缓存机制
由于Django是动态网站,所有每次请求均会去数据进行相应的操作,当程序访问量大时,耗时必然会更加明显,最简单解决方式是使用:缓存,缓存将一个某个views的返回值保存至内存或者memcache中,5 ...
- Maven版本号中隐藏的惊天大秘密
一.背景 现在主流的Java系的互联网公司里,绝大多数公司都使用Maven作为依赖管理工具,一般我们对于依赖的版本号,常见两种类型:一种以“-RELEASE”结尾,另一种以“-SNAPSHOT”结尾. ...
- ZKWeb网页框架2.0正式发布
2.0.0更新的内容有 更新框架要求 框架要求从 netstandard 1.6 升到 netstandard 2.0 框架要求从 netcoreapp1.1 升到 netcoreapp2.0 更新引 ...