jquery插件lazyload.js延迟加载图片的使用方法
如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动情况来加载你需要看的图片,然后它才会从后台请求下载图片,最后显示出来。通过这个插件,可以在需要显示图片的时候,才下载图片,从而可以减少服务器的压力,提高页面加载速度。
Lazy Load 插件原理
修改目标img元素的src属性为orginal属性,从而中断图片的加载。检测滚动状态,然后把网页可视区域中的img的src属性还原然后加载图片,从而制造了一种缓冲加载的效果。代码引入方法:
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.lazyload.js"></script>
<script type="text/javascript">
$(document).ready(
function($){
$("img").lazyload({
placeholder : "images/grey.gif", //加载图片前的占位图片
effect : "fadeIn" //加载图片使用的效果(淡入)
});
});
</script>
但是现在,很多Javascript大牛分析得出,这个插件其实并没有真正的起到缓加载的作用。确实是这样,官方也已经给出了说明和解决方法了。
其实原因就在于在新版的浏览器中,即使我们删除了Javascript控制的src属性,浏览器仍然会去加载这个图像。
那么我们该怎么解决呢?其实也很简单,需要直接修改HTML的结构,在img标签中添加新的属性,把src属性的值指向占位图片,添加data-original属性,让其指向真正的图像地址。比如:
<img src="img/grey.gif" data-original="img/example.jpg" >
当然,在上面的代码中我们把页面内的所有图片都延迟加载了,但有些时候我们并不希望这样,因为有些图片并不想然他们延迟加载,那么我们可以这样只需做:
如只缓冲加载类main下的图像
$(".main img").lazyload({
placeholder : "images/grey.gif",
effect : "fadeIn"
});
加载挂载有lazy类的图像:
$("img.lazy").lazyload({
placeholder : "images/grey.gif",
effect : "fadeIn"
});
其他的以此类推,适当做一下选择器调整就行了。
lazyload.js 高级使用方法:
下面部分来自官方文档,将官方文档进行了一下简单的翻译。
更周全的做法
我们不得不思考这样一个问题。我们定义了这样一个结构,那么网页中,就不会加载源图像了。只有当 Javascript 执行,才会显示这个源图像。如果用户的浏览器不支持或者用户关掉了支持 Javascript 的选项,那么我们的这个图像就无法显示出来。也就是说,如果没有 Javascript 的支持,我们的图像就无法显示出来。
应对这个问题,我们需要引入noscript 标签。大体思路如下:用 noscript 包含真实的图像位置,当浏览器不支持 Javascript,直接显示图像。
<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>
对现有图像,隐藏处理,使用 show()方法触发显示。
.lazy {
display: none;
}
这样,如果浏览器不支持 Javascript,我们自定义的 img 就不会出现,而显示 noscript 里面的图像。具体实现代码如下:
$("img.lazy").show().lazyload();
提前加载
默认的情况是,当你滚动到图片位置的时候,插件开始加载。这样,用户可能首先看到的是一个空白图像,然后再缓慢出现。如果你想在用户滚动之前,提前加载这个图像,你可以配置一下参数。
$("img.lazy").lazyload({
threshold : 200
});
threshold 这个参数,就是用来提前加载的。上面这个语句的意思是,当距离图片还有200像素的时候,就开始加载图片。
自定义触发事件
默认的触发事件,是滚动,当你滚动的时候,就会检查然后加载。你可以使用event属性,设置你自己的加载事件,之后你可以自定义触发这个事件的条件,然后去加载图像。
$("img.lazy").lazyload({
event : "click"
});
自定义显示效果
默认的图片实现效果,就是没有效果,下载完成之后,直接显示出来。这样的用户体验并不好,你可以设置effect属性,来控制显示图片的效果。例如
$("img.lazy").lazyload({
effect : "fadeIn"
});
fadeIn的效果就是,改变图片的透明度,渐现的方式出现。
把图像插入某个容器
大家如果使用智能手机的话,经常去应用网站下载应用,他们通常使用一个横着的容器,放一些手机截图。使用container属性,能很轻松在容器中实现缓冲加载。首先,我们需要用css定义这个容器,然后用这个插件进行加载。
#container { height: 600px; overflow: scroll; }
$("img.lazy").lazyload({
container: $("#container")
});
加载不可见图像
有部分图像是不可见的,我们对其加上类似 display:none;等属性的图像。默认的情况下,这个插件是不会加载隐藏的不可见图像。如果我们需要用它加载不可见图像,我们需要将 skip_invisible设置为false,代码如下:
$("img.lazy").lazyload({
skip_invisible : false
});
jquery插件lazyload.js延迟加载图片的使用方法的更多相关文章
- 延迟加载图片的 jQuery 插件——lazyload.js
lazyload 这个 jQuery 插件,是用来缓冲加载图片的插件.如果一篇文章很长有很多图片的话,下载图片就需要很多时间.而这款插件,会检测你的滚动情况,只有你要看到那个图片的时 候,它才会从后台 ...
- 缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解
在写代码的时候,经常会用到懒加载的模式,以前是通过window.onload的模式去加载,但是图片很多或者用ajax请求的时候,就会很麻烦,现在用lazyload的模式加载方便很多 <!doct ...
- lazyload.js实现图片异步载入
所谓图片异步加载,意思是不用一次把图片全部加载完,你可以叫它延迟加载,缓冲加载都行. 看看你有没有这种需求:某篇文章图片很多,如果在载入文章时就载入所有图片,无疑会延缓载入速度,让用户等更久,所以,我 ...
- Lazyr.js – 延迟加载图片(Lazy Loading)
Lazyr.js 是一个小的.快速的.现代的.相互间无依赖的图片延迟加载库.通过延迟加载图片,让图片出现在(或接近))视窗才加载来提高页面打开速度.这个库通过保持最少选项并最大化速度. 在线演示 ...
- 另外一款超棒的响应式布局jQuery插件 – Freetile.js
在线演示 我们曾经介绍过俩款知名的响应式布局插:isotope和masonary,今天我们这里再介绍一款相当不错的响应式布局插件 – Freetile.js,使用它同样可以生成超酷的动态布局效果.相信 ...
- 帮助更语义化的显示时间的jQuery插件 - tidyTime.js
来源:GBin1.com 网站或者web应用开发过程中,难免会遇到需要展示时间的地方,例如,留言时间或者发布帖子的时候,那么大家是不是相关过使用更加符合语义学的方式来显示时间呢? 08:15 显示成 ...
- 延迟加载图片插件LazyLoad.js的使用方法
我们常常会见到很多网页的图片并不是一打开页面就全部加载的,而是浏览到当前的图片位置才显示出来.这是怎么实现出来的呢? 其实这就是目前较为流行的“延迟加载”(Lazy Load)技术,灵感来自Matt ...
- 一个简单而实用的JQ插件——lazyload.js图片延迟加载插件
前 言 Cherish 看多了炫酷的插件之后再来看这么一个小清新的东西,是不是突然感觉JQ插件感觉很友好了,简单强大最重要的是实用. 这篇文章将详细讲解一下lazyload.js的用法 lazy ...
- JQuery缓冲加载图片插件lazyload.js的使用方法
lazyload.js是一个基于JQuery的插件,可以用来缓冲加载图片.如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动 ...
随机推荐
- [iOS翻译]《iOS7 by Tutorials》系列:iOS7的设计精髓(下)
我们继续上篇的内容 四.聚焦于内容 在iOS7里,强调的不是眼花缭乱的装饰效果,而是最重要的内容本身. 下面我们来探讨这个主题: 1.删除不必要的内容 伟大的设计更多是减法和加法的组合. 虽然很酷的想 ...
- .net面试题(.Net+Html+Javascript)
.net方面 1.简述 private. protected. public. internal 修饰符的访问权限. 2.override与重载的区别 3..net值类型和引用类型的区别,写出代码样例 ...
- HDU5336-XYZ and Drops-模拟
模拟水珠那个游戏. 小水珠超过边界会消失. 会有两个水珠同时到达一个size=4大水珠的情况.要移动完统一爆炸 #include <vector> #include <cstdio& ...
- 去除a标签单击后的虚线框
设置a标签属性outline即可 如: a { outline: none; } a:focus { outline: none; } 在firefox测试通过,webkit内核浏览器无此问题
- Ubuntu 上创建常用磁盘阵列
RAID(Redundant Array of Independent Disk 独立冗余磁盘阵列)技术是加州大学伯克利分校1987年提出,最初是为了组合小的廉价磁盘来代替大的昂贵磁盘,同时希望磁盘失 ...
- linux下安装openssh-server
csdn博文地址:linux下安装openssh-server 点击进入 系统是ubuntu14.04,系统默认安装了openssh-client,但没有安装openssh-server,需要手动 ...
- maven integration with eclipse 3.0.4 does not work with NTLM proxy
Recently downloaded m2e(maven integration with eclipse). The version is 3.0.4. My environment is beh ...
- [USACO2002][poj1944]Fiber Communications(枚举)
Fiber Communications Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 3804 Accepted: 1 ...
- AngularJS - 路由入门
我们有很多方法让一个视图随着用户的操作进行变化. 但是,只是单单一个视图就要满足所有的需求会让代码变得非常复杂. 也许我们可以使用ng-include来引用各种模板,但这只限于部分场景. 于是我们可以 ...
- Symfony学习--原创。。。。
{{ constant('Symfony\\Component\\HttpKernel\\Kernel::VERSION') }} //显示当前symfony的版本 #div { opacity: 0 ...