- 浏览: 93452 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
yeyu712:
感谢分享,脑塞了很久
document.getElementById("searchForm").submit is not a function -
liuweihug:
jquery瀑布流插件Wookmark完整使用demo - h ...
jQuery实现的瀑布流效果, 向下滚动即时加载内容
原文的链接在:http://www.appelsiini.net/projects/lazyload
现在Lazy Load的版本已经是1.7.0
下载地址:
完整版https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js ,
压缩版https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js
下面进入正题.
Lazy Load的使用方法十分简单,但新版做了一些调整,必须修改 <img> 标签的属性.
把 <img> 标签中的 src 属性改为等待图片的URL, data-original 属性填上真正的图片URL.
如下:
<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">
<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">
建议:src中的等待图片,最好使用1像素的单色图片.
JS代码如下:
$("img.lazy").lazyload();
$("img.lazy").lazyload();这样就能实现Lazy Load的效果了.
看完Demo后,是不是觉得没什么效果出现?
这个问题会在后面提到.
其实,并非一定要使用它规定的 data-original 属性来存放图片URL.
你也可以自己定制别的属性名,如下:
<img class="lazy" src="img/grey.gif" data-attr="img/example.jpg" width="640" heigh="480">
<img class="lazy" src="img/grey.gif" data-attr="img/example.jpg" width="640" heigh="480">
$("img.lazy").lazyload({ data_attribute : "attr" });
只需设置 data_attribute 属性为对应的名称即可.
注意:html代码大小写不敏感!所以 "data-" 后面只能跟小写字母或数字.
对于不支持JavaScript的浏览器,应该有相应的降级处理.
可以使用<noscript>标签,是用来定义在脚本未被执行时的替代内容/文本.
而且这样做还有一个好处,因为搜索引擎的爬虫是不处理JavaScript脚本的,所以能直接抓到<noscript>标签中的内容.
<style>
.lazy { display: none; }
.lazy { display: none; }
</style>
<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">
<noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>
<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">
<noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>
$("img.lazy").show().lazyload();
设置图片加载的反应距离
Lazy Load插件默认的设置是:图片在浏览器窗口上出现,就会触发加载.
但通过设置 threshold 属性的值,可以调整图片的预先加载位置/距离.
$("img.lazy").lazyload({ threshold : 200 });
另外, threshold 可以为正数或者负数.
正数是预先加载, 假设数值为200, 则图片距离出现到屏幕还有 200px 时,就开始加载.
如果是负数,则相反.假设数值为-200时,则图片已经在窗口出现,并且距离浏览器视窗底部的距离为 200px 时,才开始加载.
PS:图片和屏幕的距离是根据图片的 top 位置计算.
注意:threshold的设置需要考虑网站的长度和图片的高度,如果数值过大则会导致无法加载的问题.建议数值设置不要超过相应图片高度的一半.
通过事件触发加载
可以通过jQuery定义的事件来触发加载,也可以使用自己定义的事件.
$("img.lazy").lazyload({
event : "click"
});
实现动画效果
上面的Demo之所以会没有图片加载的效果,是因为Lazy Load默认的图片加载是通过 jQuery 的show()方法来显示,所以图片出现几乎是一瞬间.
当然我们还可以实现其他效果.
$("img.lazy").lazyload({
effect : "fadeIn"
});
另外还可以使用 slideDown() 方法,但效果不佳.
如果想要控制动画的速度,还可以修改 effectspeed 属性.
$("img.lazy").lazyload({
effect : "fadeIn",
effectspeed : 1000
});
effectspeed 属性默认是空的,所以如果不设置它,动画的时间为400毫秒.
容器
当要延迟加载的图片全摆在一个容器中.
只需把 container 属性指向摆放 img 的容器的对象.
#container {
height: 600px;
overflow: scroll;
}
#container {
height: 600px;
overflow: scroll;
}
$("img.lazy").lazyload({
container: $("#container")
});
废话不多说,直接看Demo ,不单竖着的可以, 横着也行Demo .
Lazy Load 有一个循环查找 img 的机制.根据 HTML 文档的布局从上往下查找,当找到第一个并未显示/加载的 img 时,就会停止往下查找.(其实就是对 $("img.lazy") 这个对象(组)进行顺序查找)
那这个 failure_limit 的属性有什么用呢?
现在网站设计时,都会用到大量的定位样式,如: float 和 position , 这样在浏览器呈现的布局效果和 HTML 文档中的 DOM 顺序有很大差异.
这样就会存在一种情况,某 <img> 标签已出现在屏幕上,但它却无法显示!!
因为它在 HTML 文档中的实际位置排在了那些还没有显示的 <img> 标签后面, 这样会导致显示在屏幕上的这个 <img> 标签无法加载相应的图片.
当Lazy Load 在找到第一个未显示的 <img> 标签时,查找已经被终止了, 并没有继续往下遍历.
所以这个时候,就可以使用failure_limit
属性.
$("img.lazy").lazyload({
failure_limit : 10
});
这样 Lazy Load 会查找到第10个未显示的 <img> 标签处.
当在图片多且布局复杂的页面时, failure_limit 的作用就很大了.
原文还温馨提示:If you have a funky layout set this number to something high. 如果你的网站布局很"变态",建议把该值调得更高.
延迟下载
图片
可以通过自定义事件,然后通过 setTimeout 来设置延迟触发该事件.
$(function() {
$("img:below-the-fold").lazyload({
event : "sporty"
});
});
$(window).bind("load", function() {
var timeout = setTimeout(function() {$("img.lazy").trigger("sporty")},5000);
});
主要原理是,当 event 被设置为 scroll 以外的事件时, 实际上都会绑定了一个内置的 "appear" 事件.
顾名思义, 这个事件就是用来显示图片的. (其实 scroll 也是调用这个事件)
加载不可见的图片
Lazy Load 插件默认对隐藏的图片不加载(例如 display:none ). 这样做有助于性能的优化.
如果希望连隐藏的图片一起加载,则可以把 skip_invisible 设为 false .
$("img.lazy").lazyload({
skip_invisible : false
});
其实1.7.0版还有一些新的特性.有空再补上.
摘自 简生的代码备忘录
发表评论
-
外部javascript引用非.js文件
2013-10-30 21:18 668按照惯例,外部Javascript文件带有.js扩展名。 但 ... -
js中cookie的使用详细分析
2013-01-08 10:30 191JavaScript中的另一个机制 ... -
一个javascript获取顶级域名的算法
2013-01-08 10:28 271/** * Router - 路由管理 * By W ... -
关于document.compatMode的一些介绍
2012-12-03 22:59 1593对于document.compatMode ,很多朋友可能跟 ... -
用javascript getComputedStyle获取和设置style的原理
2012-10-30 10:35 5515DOM标准引入了覆盖样式表的概念,当我们用document.g ... -
网页 HTML table 导出成 excel
2012-10-25 10:34 611需要在 HTML 的声明里加上 excel 的命名空间 然后 ... -
JSON数据格式基本讲解(转)
2012-10-19 10:07 479在异步应用程序中发送和接收信息时,可以选择以纯文本和 XM ... -
jquery实现的年月日三级联动
2012-09-27 14:29 4109<html xmlns="http://www ... -
一个正则表达式,只含有汉字、数字、字母、下划线不能以下划线开头和结尾:
2012-09-26 13:45 29751、一个正则表达式,只含有汉字、数字、字母、下划线不能以下划线 ... -
js去掉字符串前后空格的五种方法
2012-09-25 13:58 1622第一种:循环检查替换 //供使用者调用 funct ... -
Js获取当前页面URL的一些属性
2012-09-07 15:40 209设置或获取对象指定的文件名或路径:window.locatio ... -
js数组 sort方法的分析
2012-09-03 23:45 212原帖地址:http://blog.csdn.net/pre ... -
忽略IE6/7的jquery返回到顶页
2012-08-11 15:13 238<a href="#" id ... -
Lazy Load, 延迟加载图片的 jQuery 插件
2012-08-08 13:32 832Lazy Load 是一个用 JavaScript 编 ... -
jQuery JSONP 跨域实践(php)
2012-08-06 10:04 3669jquery jsonp php实例 远程服务器上的php文 ... -
带参数的JS脚本文件
2012-08-01 17:05 1031假如请求:main.js?path=root&tm=1 ... -
如果浏览器禁用javascript应该怎么办?
2012-08-01 15:20 207使用<noscript>提示: <nosc ... -
jQuery实现的瀑布流效果, 向下滚动即时加载内容
2012-08-01 12:38 20501下拉滚动条或鼠标滚 ... -
js压缩工具JSMin的用法
2012-07-30 13:43 323http://www.2cto.com/uploadfile/ ... -
谷歌 offsetWidth获取值失常和scrollTop为0
2012-07-05 11:29 156今天在做一个项目中碰到了一个很奇怪的问题就是通过offsetW ...
相关推荐
jQuery LazyLoad 是一个jQuery插件,它的主要功能是在用户滚动页面到图片所在位置时才开始加载图片,而不是在页面初始加载时就一次性加载所有图片。这种方式大大减少了首次加载页面时的数据量,提高了页面的加载速度...
**jQuery LazyLoad 插件详解:实现图片延迟加载** 在网页设计中,为了提升用户体验,减少页面初次加载的时间,一种常见的优化策略是采用图片延迟加载(Image Lazy Load)技术。`jQuery LazyLoad` 是一个非常实用的 ...
jQuery.lazyload 是一个非常流行的 jQuery 插件,专门用于实现图片延迟加载功能。这个插件通过监听滚动事件来判断图片是否进入视口,一旦发现图片进入可视区域,它就会替换占位符,加载真实的图片资源。jQuery.lazy...
jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度。在某些情况下,它也能帮助减轻服务器负载。演示地址http://www.jq22.com/jquery-info390
为了解决这一问题,我们可以使用`jQuery LazyLoad`插件实现图片的延迟加载,即“懒加载”。本文将详细介绍如何利用jQuery LazyLoad来实现图片的懒加载功能,并通过实例进行演示。 ### 1. jQuery LazyLoad 插件简介 ...
为了解决这一问题,jQuery 提供了一个插件——jQuery Lazyload,它允许我们实现图片的延迟加载(也称为懒加载),即图片只在用户滚动到可视区域时才开始加载。这种方式可以显著提升网页的加载速度,特别是对于拥有...
它是一种高效的图片延迟加载插件,允许我们在用户滚动到图片所在位置时才开始加载,从而显著提高网页的加载速度。 **1. jQuery LazyLoad.js 的工作原理** jQuery LazyLoad.js 的核心思想是“按需加载”。它监控...
- **jquery.lazyload.js**:这是懒加载插件的核心文件,包含了实现图片延迟加载功能的JavaScript代码,需要在网页中引入并进行适当配置。 - **图片延迟加载(懒加载)jQuery插件**:可能是一个包含使用该插件的HTML、...
### 延迟加载图片技术详解:利用jquery.lazyload.js实现高效页面加载 #### 技术背景 在互联网时代,网站或应用中的图片资源占据了大量的数据传输量,尤其是在移动网络环境下,图片的加载速度直接影响了用户体验及...
你必须修改 HTML 代码. 在 src 属性中设置展位符图片, demo 页面使用 1x1 像素灰色 GIF 图片.... 这里可以定义特定的 class 以获得需要延迟加载的图片对象. 通过这种方法你可以简单地控制插件绑定.
**jQuery图片延迟加载技术详解** 在网页设计中,图片加载是一项关键任务,尤其对于内容丰富的网站,如果所有图片一次性加载,可能会导致页面加载速度变慢,用户体验下降。为了解决这个问题,开发人员引入了“图片...
**jQuery LazyLoad 图片延迟加载技术** 在网页设计中,图片是重要的元素之一,但大量图片的加载往往会导致页面加载速度变慢,用户体验下降。为了解决这个问题,开发者们引入了图片延迟加载(Lazy Load)技术。...
jQuery图片延迟加载插件Lazy Load是一种高效的前端技术,旨在优化网页性能,特别是在包含大量图片的网页上。在当今互联网环境中,用户体验是至关重要的,而快速的页面加载速度是提升用户体验的关键因素之一。Lazy ...
React 延迟加载图片组件演示 这是react-lazy-load-image-component NPM 包的演示。 它既不打算在现实生活中使用,也不是好的编程实践的一个例子,而是要给出一个如何使用包react-lazy-load-image-component及其道具...
`jQuery EasyLazyload` 插件库基于广泛使用的jQuery框架开发,它简化了图片懒加载的实现过程,让开发者无需深入了解底层机制就能轻松地在网站上应用。以下是对这个插件库的一些核心知识点的详细解释: 1. **基本...
"Lazyload 延迟加载效果"是一种优化网页性能的技术,它主要应用于图像和其他大体积资源的加载。在网页设计中,当用户滚动页面时,只加载可视区域内的内容,而将非可视区域的内容推迟到需要时再加载,这就是延迟加载...
jQuery LazyLoad Any是一个高效的插件,专为延迟加载图像、iframe或者其他任何元素而设计,它大大提升了页面的性能。这个压缩包文件"前端项目-jquery-lazyload-any.zip"包含了实现这一功能的所有资源,主要文件夹为...
标题中的“【ZT】图片延迟加载 jquery.lazyload插件”指的是使用jQuery库的一个扩展插件——jQuery Lazyload,该插件主要用于实现图片的延迟加载技术。延迟加载是一种优化网页性能的方法,它允许图片在用户滚动到...
- 初始化插件:在文档加载完成后(通常在`$(document).ready()`内)调用`$.lazyload()`方法,启用插件功能。 4. **配置选项**: jQuery_lazyload提供了多种可自定义的配置选项,例如: - `threshold`:设置元素...
jQuery.Lazyload.js是一个高效实用的JavaScript插件,它能够显著提升网页加载速度,同时赋予网页图片渐显效果,从而创造出既美观又高效的网页浏览体验。 jQuery.Lazyload.js的核心原理在于"懒加载"(Lazy Loading)...