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 ...
随机推荐
- 多线程下NSOperation、NSBlockOperation、NSInvocationOperation、NSOperationQueue的使用
本篇文章主要介绍下多线程下NSOperation.NSBlockOperation.NSInvocationOperation.NSOperationQueue的使用,列举几个简单的例子. 默认情况下 ...
- PHP中删除数组空值的方法
array_filter函数的功能是利用回调函数来对数组进行过滤,如果没有回调函数,那么默认就是删除数组中值为false的项目. 例如 $entry = array( 0 ...
- Swift中的一些关键字
以下关键字关于引用传参.属性.修改成员变量.静态变量.索引和构造函数重载 读过The Swift Programming Language的人都能看得出,我上面的这几个说法全不是apple的习惯用语. ...
- tomcat配置详解/优化方案
Service.xml Server.xml配置文件用于对整个容器进行相关的配置. <Server>元素:是整个配置文件的根元素.表示整个Catalina容器. 属性:className: ...
- php 执行计划任务方式之 linux crontab 执行命令
一.crond简介 crond 是linux下用来周期性的执行某种任务或等待处理某些事件的一个守护进程,与windows下的计划任务类似,当安装完成操作系统后,默认会安装此服务 工具,并且会自动启动c ...
- Leetcode Candy
There are N children standing in a line. Each child is assigned a rating value. You are giving candi ...
- BZOJ1097: [POI2007]旅游景点atr
..k次最短路后,考虑如何满足先走一些点 用状压dp,每一个点考虑它所需要经过的点a[i],当当前走过的点包含a[i]时,i 这个点才可以到达. 写的时候用记忆化搜索. #include<bit ...
- MySQL生成模型
根据数据库表生成Model using System; using System.Collections.Generic; using System.Data; using System.Text; ...
- Win 10 文件浏览器无法打开
今天遇到个很奇怪的问题,文件浏览器File Explorer无法正常显示,点击打开后任务栏上已经显示打开了,但是屏幕上却看不到任何窗口,开始以为机子中了恶意的木马,然后就疯狂的查毒,然而并没有解决问题 ...
- TweenMax参数说明
TweenMax 建立在 TweenLite 和 TweenFilterLite 基础之上,因此,又揉合了这二者的功能,使得功能更加的齐备,但是如果说易用性,觉得还是 TweenLite 来得方便一些 ...