jquery.lazyload插件实现图片延迟加载
jquery.lazyload是一个实现图片延迟加载的jQuery 插件,它可以延迟加载长页面中的图片。在浏览器可视区域外的图片在初始状态下不会被载入,直到用户将页面滚动到它们所在的位置。
1.引入js文件
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
2.img标签
<img >"lazy" src="data:images/placeholder.gif" data-original="images/example.png" width="600"/">
img标签的src指向一个图片占位符,这里推荐一个在线获取图片占位符的站点 > http://placehold.it/,真实图片路径在data-original中。
3.调用lazyload
$("img.lazy").lazyload();
图片的占位符除了可以通过src属性来指定,也可以通过lazyload函数的参数来指定:
$("img.lazy").lazyload({
placeholder: "images/placeholder.gif"
});
4.占位图片事件触发加载
如果我们希望滚到到图片的位置后,还要通过click或hover事件来唤醒图片的加载,我们可以指定lazyload函数的event属性:
$("img.lazy").lazyload({
placeholder: "images/placeholder.gif",
event: "click"
});
当图片完全加载的时候,插件默认地使用show()方法来将图显示出来。你也可以使用其他的效果,如fadeIn:
$("img.lazy").lazyload({
effect: "fadeIn"
})
5.提前加载图片
lazyload插件默认用户滚动到图片位置时才触发加载图片,如果我们希望滚动到距离图片一定位置就触发加载,可以指定lazyload函数的threshold参数:
$(“img.lazy”).lazyload({
threshold: 200
});
这样,当用户滚动到距离图片200像素时图片就开始加载了。
6.设置查找图片张数
lazyload的实现原理是,在页面滚动时,会搜索未加载的图片,如果图片在可视范围内就加载,默认情况下当找到第一张不在可见区域的图片时就会停止搜索。而搜索的顺序就是HTML文档中dom节点的定义顺序,所以如果有些图片定义在前面,但由于页面不好的布局图片将会呈现在后面,那么就会导致图片没办法正常显示。
此时我们可以通过lazyload函数的failure_limit参数:
$("img.lazy").lazyload({
failure_limit: 10
});
这样一来,插件会搜索至少10个未加载的图片才停止搜索,如果你的图片布局比较不规则,可以尝试将这个参数调大。
jquery.lazyload插件实现图片延迟加载的更多相关文章
- jquery.lazyload插件实现图片延迟加载详解
什么是LazyLoad技术? 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互.尤其是对于高清晰的图片,占了几百K的空间.Lazy Load 是一个用 JavaScript 编写的 ...
- jQuery前端插件以及图片延迟加载
插件名称 用途 插件官网地址 fontawsome CSS图标插件 http://fontawesome.io easyui 基于jQuery的用户界面插件集合 http://www.jeasyui. ...
- Jquery.LazyLoad.js实现图片延迟加载功能
从网上下载来的版本多多少少都有些BUG,尤其是加载后在IE6和IE7下图片闪动是个大问题,在网上查了很久,也没有找到相关的解决方案.没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了 ...
- jQuery lazyload插件详解和问题解答
lazyload插件用于图片延迟加载,节省服务器带宽,减少服务器请求次数,提高网站的页面加载速度,用于网站性能优化,只有当图片在窗口可视范围内时才向服务器请求: 参数: threshold:设置距离窗 ...
- 图片延时加载原理 和 使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
图片加载技术分为:图片预加载和图片延时加载. javascript图片预加载和延时加载的区别主要体现在图片传输到客户端的时机上,都是为了提升用户体验的,延时加载又叫懒加载.两种技术的本质:两者的行为是 ...
- 使用jquery插件实现图片延迟加载技术(懒加载)
有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...
- 使用jquery插件实现图片延迟加载--懒加载技术
原文链接:http://www.cnblogs.com/lei2007/archive/2013/05/31/3110725.html 感谢作者.以下为原文,备忘仅供自己学习. 第一:lazyLoad ...
- [转载]jQuery.lazyload详解 - 图片延时加载
jQuery实现图片延迟加载,不知道是否可以节省带宽呢?有人知道吗? 这究竟只是一个视觉特效还是真的能延迟加载减少服务器的请求呢? <script type="text/javascr ...
- jquery.lazyload.js实现图片懒加载
个人理解:将需要延迟加载的图片的src属性全部设置为一张相同尽可能小(目的是尽可能的少占宽带,节省流量,由于缓存机制,当浏览器加载了一张图片之后,相同的图片就会在缓存中拿,不会重新到服务器上拿)的图片 ...
随机推荐
- (二)swagger-springmvc
如何入门 1. 我在 http://mvnrepository.com/ 上搜索 swagger-springmvc 2. 我找到一个具体版本 http://mvnrepository.com/art ...
- 高翔《视觉SLAM十四讲》从理论到实践
目录 第1讲 前言:本书讲什么:如何使用本书: 第2讲 初始SLAM:引子-小萝卜的例子:经典视觉SLAM框架:SLAM问题的数学表述:实践-编程基础: 第3讲 三维空间刚体运动 旋转矩阵:实践-Ei ...
- springMVC ModelAndView 作用与功能解析 【转】
Spring mvc视图机制 所有的web应用的mvc框架都有它定位视图的方式.Spring提供了视图解析器供你在浏览器中显示模型数据,而不必被拘束在特定的视图技术上. Spring的控制器Contr ...
- Android-fragment的替换
fragment的替换:是指一个Activity加载多个Fragment,当某些动作的时候在Activity替换Fragment显示: 昨天写的这几篇博客,Android-fragment简介-fra ...
- Docker load与Docker import
docker load与docker import 首先,想要清楚的了解docker load与docker import命令的区别,就必须了解镜像与容器的区别: 镜像:用来启动容器的只读模板,是 ...
- linux系统编程之文件与IO(八):文件描述符相关操作-dup,dup2,fcntl
本节目标: 1,文件共享 打开文件内核数据结构 一个进程两次打开同一个文件 两个进程打开同一个文件 2,复制文件描述符(dup.dup2.fcntl) 一,文件共享 1,一个进程打开两个文件内核数据结 ...
- C#多线程编程系列(三)- 线程同步
目录 1.1 简介 1.2 执行基本原子操作 1.3 使用Mutex类 1.4 使用SemaphoreSlim类 1.5 使用AutoResetEvent类 1.6 使用ManualResetEven ...
- 知识记录:ASP.NET 应用程序生命周期概述及Global.asax文件中的事件
IIS7 ASP.NET 应用程序生命周期概述 https://msdn.microsoft.com/zh-cn/library/bb470252(v=vs.100).aspx HttpApplica ...
- 预处理函数在app和蓝图级别的不同使用
app级别 from flask import Flask from flask_sqlalchemy import SQLAlchemy # SQLAlchemy 类实例对象的创建一定要在引用蓝图之 ...
- python stdout 重定向
import sys class Buffer(object): def __init__(self): self.buffer = [] def write(self, *args, **kwarg ...