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 ...
随机推荐
- svn 批量加入没有加入版本号控制的文件命令
svn st | awk '{if($1=="?"){print$2}}'|xargs svn add
- Maven实战(九)——打包的技巧
"打包"这个词听起来比較土.比較正式的说法应该是"构建项目软件包".详细说就是将项目中的各种文件,比方源代码.编译生成的字节码.配置文件.文档,依照规范的格式生 ...
- 通过路由url携带参数进行参数传递
一.url解析参数 在路由中写入,同一个控制器,同一个页面模板,可以写多个路由,不同的路由对应相同的页面,只是在这种传参数的状态下的特定页面. .state("OrderRecord&quo ...
- log4j配置文件详解(转)
Log4J的配置文件(Configuration File)就是用来设置记录器的级别.存放器和布局的,它可接key=value格式的设置或xml格式的设置信息.通过配置,可以创建出Log4J的运行环境 ...
- Tencent社会招聘scrapy爬虫 --- 已经解决
1.用 scrapy 新建一个 tencent 项目 2.在 items.py 中确定要爬去的内容 # -*- coding: utf- -*- # Define here the models fo ...
- springboot+CXF开发webservice对外提供接口(转)
文章来源:http://www.leftso.com/blog/144.html 1.项目要对外提供接口,用webservcie的方式实现 2.添加的jar包 maven: <dependenc ...
- JS中数组的迭代方法和归并方法
昨天总结的JavaScript中的数组Array方法 数组的迭代方法 ES5中为数组定义了5个迭代方法.每个方法都要接收两个参数:要在每一项上面运行的函数和(可选的)运行该函数的作用域对象---影响t ...
- MySQL数据库常见操作
数据库连接与关闭:mysql -h 服务器主机地址 -u 用户名 -p 用户密码 创建新用户并授权:grant 权限 on 数据库.数据表 to 用户名@登录主机 identified by &quo ...
- 计算机和HMI设备通信之程序上下载
1.传送模式 2.串行接口传送HMI,软件采用Wincc flexable smart v3 3.设置HMI设备,给HMI设备上电 打开控制面板,双击Transfer 使能Enable Channel ...
- Xamarin Android自定义文本框
xamarin android 自定义文本框简单的用法 关键点在于,监听EditText的内容变化,不同于java中文本内容变化去调用EditText.addTextChangedListener(m ...