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 ...
随机推荐
- Qwtpolar的编译
Qwtpolar是Qt的一个第三方扩展,用于绘制极坐标下的函数图形.官方网站在: http://sourceforge.net/projects/qwtpolar/ 新版的QGIS2.8依赖这个库,所 ...
- HDU 1043 Eight (BFS·八数码·康托展开)
题意 输出八数码问题从给定状态到12345678x的路径 用康托展开将排列相应为整数 即这个排列在全部排列中的字典序 然后就是基础的BFS了 #include <bits/stdc++.h ...
- mov指令具体解释
MOV指令能够在CPU内或CPU和存储器之间传送字或字节.它传送的信息能够从寄存器到寄存器,马上数到寄存器,马上数到存储单元,从存储单元到寄存器.从寄存器到存储单元,从寄存器或存储单元到除CS外的段寄 ...
- macox下编译snappy静态库
源代码地址:https://github.com/google/snappy 下载 git clone https://github.com/google/snappy 编译 进入snappy源代码文 ...
- 菜鸟版JAVA设计模式—外观模式
外观模式是一种比較easy理解的模式,作用非常easy.就是解耦合. 结构也是非常easy,一个外观类.这个外观类持有非常多的业务类. 再由客户类去调用这个外观类去实现一些列的业务操作... 这个模式 ...
- OD调试程序经常使用断点大全
经常使用断点 拦截窗体: bp CreateWindow 创建窗体 bp CreateWindowEx(A) 创建窗体 bp ShowWindow 显示窗体 bp UpdateWindow ...
- UI - Cocoa Touch框架
Cocoa Touch 层 Cocoa Touch层包括创建 iOS应用程序所需的关键框架. 上至实现应用程序可视界面,下至与高级系统服务交互.都须要该层技术提供底层基础.在开发应用程序的时候.请尽可 ...
- as 与 is
在存储过程(PROCEDURE)和函数(FUNCTION)中没有区别:在视图(VIEW)中只能用AS:在游标(CURSOR)中只能用IS.
- Python 项目实践一(外星人入侵小游戏)第二篇
接着上次的继续学习. 一 创建一个设置类 每次给游戏添加新功能时,通常也将引入一些新设置.下面来编写一个名为settings的模块,其中包含一个名为Settings的类,用于将所有设置存储在一个地方, ...
- 十、 Spring Boot Shiro 权限管理
使用Shiro之前用在spring MVC中,是通过XML文件进行配置. 将Shiro应用到Spring Boot中,本地已经完成了SpringBoot使用Shiro的实例,将配置方法共享一下. 先简 ...