jquery懒加载jquery.lazyload.js
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.
在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担.
一.使用方法
Lazy Load 依赖于 jQuery. 请将下列代码加入HTML的结尾,也就是</body>
前:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lazyload.js"></script>
你必须改变图片的标签。图像的地址必须放在data-original
属性上。给懒加载图像一个特定的class(例如:lazy)。这样你可以很容易地进行图像插件捆绑。代码如下:
<img class="lazy" alt="" width="640" height="480" data-original="img/example.jpg" />
$(function() {
$("img.lazy").lazyload();
});
这将使所有 class 为 lazy
的图片将被延迟加载.
设置临界点
默认情况下图片会出现在屏幕时加载. 如果你想提前加载图片, 可以设置threshold
选项, 设置 threshold 为 200 令图片在距离屏幕 200 像素时提前加载.
$("img.lazy").lazyload({
threshold : 200
})
设置事件来触发加载
你可以使用jQuery事件,例如click
和mouseover
。也可以使用自定义事件,如sporty
、foobar
默认情况下是要等到用户向下滚动并且图像出现在视口中时。只有当用户点击它们才加载图片:
$("img.lazy").lazyload({
event : "click"
});
使用特效
默认情况下,插件等待图像完全加载并调用show()
。你可以使用任何你想要的效果。下面的代码使用fadeIn
(淡入效果)。
$("img.lazy").lazyload({
effect : "fadeIn"
});
插件下载:http://www.w3cways.com/tag/jquery-lazyload-js
jquery懒加载jquery.lazyload.js的更多相关文章
- 图片懒加载插件lazyload.js详解
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 图片懒加载之lazyload.js插件使用
简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 使用 lazyload依赖与jquery.所以先引入jquery和lazyl ...
- jQuery懒加载插件jquery.lazyload.js使用说明实例
jQuery懒加载插件jquery.lazyload.js使用说明实例很多网站都会用到‘图片懒加载’这种方式对网站进行优化,即延迟加载图片或符合某些条件才开始加载图片.懒加载原理:浏览器会自动对页面中 ...
- ajax-json,遇到的一个问题,jquery var ,加载顺序。JS对象,json格式转换。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 图片懒加载插件lazyload使用方法
图片懒加载插件lazyload使用方法 一.如何使用: Lazy Load 依赖于 jQuery.引入文件 <script type="text/javascript" sr ...
- jQuery懒加载插件 – jquery.lazyload.js简单调用
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- jQuery懒加载插件 – jquery.lazyload.js
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- jQuery懒加载插件
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- 懒加载 jquery代码
懒加载代码.据说这是jquery代码. 说白了就是在 开始的时候调用,这个和C#代码错误处理机制是一样的. function check() { var obj = document ...
随机推荐
- 【转】详解Java正则表达式语法
(转自: http://www.jb51.net/article/76354.htm) 这篇文章主要介绍了Java正则表达式语法,包括常用正则表达式.匹配验证-验证Email是否正确以及字符串中查询字 ...
- sql面试题一 学生成绩
sql面试题一 学生成绩 原帖链接:http://topic.csdn.net/u/20081020/15/1ABF54D0-F401-42AB-A75E-DF90027CEBA0.html 表架 ...
- navigation和tabbar上的文字.图片 自定义
[[UITabBarItem appearance] setTitleTextAttributes:@{ UITextAttributeTextColor : [UIColor blackColor] ...
- tp框架之数据添加
1.数组添加 //$attr = array("Code"=>"n088","Name"=>"哈萨克族"); ...
- python学习笔记(2)
1.for循环 用户按照顺序循环可迭代对象中的内容. li = [11,22,33,44] for i in li: print i for循环的else 此功能目前只有for循环里面有发现. 具体条 ...
- 《图形学》实验七:中点Bresenham算法画椭圆
开发环境: VC++6.0,OpenGL 实验内容: 使用中点Bresenham算法画椭圆. 实验结果: 代码: #include <gl/glut.h> #define WIDTH 50 ...
- 数据类型和Json格式
1. 前几天,我才知道有一种简化的数据交换格式,叫做yaml. 我翻了一遍它的文档,看懂的地方不多,但是有一句话令我茅塞顿开. 它说,从结构上看,所有的数据(data)最终都可以分解成三种类型: 第一 ...
- IE8+兼容经验小结
最近一段时间,我都使用Flask+Bootstrap3的框架组合进行开发.本文就是在这种技术组合下,分享IE8+兼容性问题的解决方法.根据我的实践经验,如果你在写HTML/CSS时候是按照W3C推荐的 ...
- T-SQL Recipes之 Table Variables and Temporary Tables
Problem 许多时候, 我们想要Table Variables在动态SQL中执行,但现实是很骨感的.比如这个示例: DECLARE @sql_command NVARCHAR(MAX); DECL ...
- css疑难汇总
关于a标签不换行顶开容器的问题(转自): 我们用div,p,ul,li(等块级元素)布局给其设定了特定的width,那么就会自动的换行.用span,a(等内联元素)设置了display:inline- ...