lazyload 加载
2019独角兽企业重金招聘Python工程师标准>>>
jQuery Lazy Load是一个基于jQuery的图片延迟加载插件,在用户滚动页面到图片之后才进行加载,其对于有较多图片的页面当中,使用图片延迟加载,能够有效的提高页面的加载速度。 这里给出Lazyload相关的demo页面(插件作者制作): 基本功能、渐变元素、没有script的返回、水平滚动的页面、容器内的水平滚动 注意:在切换每个demo页面的时候请记得清除浏览器缓存。 接下来我们说下使用jQuery Lazy Load的三要素: 1、因为该插件建立在jQuery的存在上,所以请在</body>前加入jQuery和该插件的调用,示例代码如下:
2、必须在image上添加data-original属性并放入原图片链接,并且在src中放入执行Lazyload未执行前所显示的图片链接,示例代码如下:
注意,如果你想更精确的对指定执行Lazyload的图片进行定位的话,还可以在image中添加Id或者class,示例代码如下:
3、jQuery Lazy Load的配置函数:
再下面,谈下配置jQuery Lazy Load的一些值: 阈值:百度上的解释是促发某种行为或者反应产生所需要的最低值,这里是设置当前显示部分底部或者最右边距离图片一段距离的时候开始加载开始出现的图片,这一段距离就是该值所设立的。示例代码如下:
注意,默认值是当图片开始出现在当前显示部分的时候才开始加载。 触发方式:比如通过点击或者鼠标移动到图片上才触发Lazyload,默认是通过鼠标滚动页面到图片出现就开始加载。示例代码如下:
下面说下本文一开始给出的demo一一做个介绍: 实现定义延迟时间过后再加载的demo,示例代码如下:
由于Lazyload默认是在一张图片完全加载了之后才显现,那么现在给它加一个渐变的特效,示例代码如下:
没有script的返回demo,示例代码如下:
在容器内使用Lazyload:
说到这里,切入一个话题——当图片并非有序呈现在浏览器窗口的时候应该怎么办呢? Lazyload有一个循环查找img的机制,根据html文档的布局从上往下查找,当第一个被找到的img没有显示或者加载的时候,它就会停止往下查找,相对来说是对$("img.lazy")这个对象(组)进行顺序查找。 但是假如在页面上有用到float和position等样式来定位图片的时候,浏览器所呈现的布局跟html中的DOM(图片)顺序就相驳了,从而导致某种情况下img出现在当前可显示页面上却无法显示或者加载的问题。还有就是因为其循环查找img的机制,在Lazyload找到第一个未显示的img时,其查找就被中止,从而无法往下遍历。 接着这儿给出的方案就是failure_limit属性,请看以下示例代码:
其中它的作用是让Lazyload查找到第10个未显示的img处,这家伙主要是用在图片多且布局复杂的页面,如果你的页面真的太过于“变态”的话请努力上调该值。 说到这里(真的词穷了),我们再说说一个问题——如果遇到不可见的图片的时候应该怎么办? 小觉这儿所说的不可见的图片所代表的是那些出现在当前显示屏幕却没有 :visible 属性的图片,对此Lazyload的默认做法是忽视掉这些没有 :visible 属性的图片。所以对此可以对函数配置skip_invisible为false来重新让Lazyload遍历到这些不可见的图片,可参考以下示例代码:
注意:Webkit内核浏览器在img上没有定义图片宽和高的情况下会报告这类不可见图片,这将导致只有在你滚动鼠标的一会才能够显示图片,当然这也得基于你已经对其将skip_invisible设置为false。 说到这里(实在是不知道怎么衔接了),我们再说说又一个问题,Lazyload可否应用到背景图片中呢? 答案是可以的,默认待其因页面滚动而显现的时候就会加载,这和Lazyload基本特性相同,而且这里有两种方法使用: 其一是用在没有图片的元素上,且其会自动改变background-image样式为data-original上的链接,实例代码如下:
其二是用在img占位符上,且在该占位符上将失去一个http请求,示例代码如下:
注意:现在只有Lazyload 1.9.0及其以上版本支持在背景图片上使用延迟加载。 说到这里(……),再说下Lazyload的两个事件,即appear和load,同时这两个时间又含有两个参数,即elements_left和settings,下面一一说明一下:
复制代码 可能上述文字有点难以明白,以下为一示例代码:
上述代码所执行的是让lazy类的图片在出现的时候由左向右加载,然后在加载所有图片时也是由左向右加载,啊!!我也不懂,希望懂的朋友能够纠正下,度娘和谷歌都无法给出准确的回应。 说到这里(= =),让我们再说说一个参数atta_attribute,它的作用是可以自定义original 图片属性,下面给出示例代码的话大家应该懂了:
最后小觉也自己写了一串代码来加强Lazyload,当然小觉的水平不可能让其支持其所有功能,这里小觉所要达到的目的是自动将原img中的src真实地址放置于data-original中,然后src中定义未加载真实图片前的图片地址。示例代码如下:
关于Lazyload的下载(可直接调用链接,最新版本都出现在该链接): 最新的Lazyload原始版本:https://raw.github.com/tuupola/j ... /jquery.lazyload.js 最新的Lazyload压缩版本:https://raw.github.com/tuupola/j ... ery.lazyload.min.js 已经在Safari 5.1, Safari 6, Chrome 20, Firefox 12 on OSX and Chrome 20, IE 8 and IE 9 on windows and Safari 5.1 on iOS 5 both iphone and ipad等地进行测试完善。 |
转载于:https://my.oschina.net/u/2433463/blog/757446
lazyload 加载相关推荐
- 关于Lazyload加载图片几种方法的介绍
Lazyload长页面图片的延迟加载: 一,jquery.lazyload.js 注意事项:jquery.js务必先引进,然后才加载lazyload:img长宽一定要有,每幅长宽可以不一致:在js段, ...
- php ajax 懒加载demo,lazyload懒加载,怎么支持ajax获得的新内容?
lazyload懒加载,怎么支持ajax获得的新内容? 现在问题是: 1.老的内容已经$("img.lazy").lazyload({effect: "fadeIn&qu ...
- css图片加载没有效果,CSS 无图片显示加载(失败)效果
lazyload 时利用 iconfont 显示加载图片和加载失败效果 0. 效果 1. 显示加载中或者品牌图 可以是文字或者 iconfont, 并将图标显示到正中间 HTML 结构如下: .img ...
- html 图片加载错误,CSS 无图片显示加载(失败)效果
lazyload 时利用 iconfont 显示加载图片和加载失败效果 0. 效果 1. 显示加载中或者品牌图 可以是文字或者 iconfont, 并将图标显示到正中间 HTML 结构如下: .img ...
- 前端如何实现图片懒加载(lazyload) 提高用户体验
定义 图片懒加载又称图片延时加载.惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力. 惰性加载是程序人性化的一种体现,提高用户体验,防 ...
- 图片的赖加载(lazyLoad)
懒加载的意义(在线demo预览) 尽管很多公司的网页都有一些限制,比如页面的最大的图片大小不得大于50k,也有很多图片优化工具fis3.gulp等等,但是如果图片太多还是会影响页面的加载速度,快则几十 ...
- jQuery lazyload 懒加载
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- jquery-懒加载技术(简称lazyload)
第一:lazyLoad简介及作用: 网站性能优化的插件,提高用户体验. 页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图 ...
- 图片懒加载解决方案 lazyload.js
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
最新文章
- Nat. Mach. Intell. | 利用条件循环神经网络生成特定性质分子
- Visual Studio 2013开发 mini-filter driver step by step 内核代码段分页alloc_text的使用(9)
- python oracle blob_如何用python在oracle中插入blob?
- Codeforces Round #364 (Div. 2)C. They Are Everywhere(尺取法)
- Topaz DeNoise AI 3.6.2 for Mac(图片降噪软件)
- 这个“忽悠”马云10亿的男人,还了阿里巴巴5000亿
- Kibana饼图介绍
- 各历史版本NDK下载地址
- 方舟单机/管理员生物指令代码大全
- 物联网智能家居ppt
- 如何突破思维局限去思考世界,去读读以下三个理论
- DNS解析时发现域名和IP不一致,访问了该域名会如何(大厂真题)
- 前端需要了解的5G网络知识
- 罗技K480拆解_减重
- k8s中将flannel网络切换calico网络
- IDEA启动连接不上数据库,但navicat却可以问题
- 有什么好用的拍照翻译软件?拍照翻译软件哪个好用?
- 西安邮电大学计算机学院学生会,2017年度计算机学院教职工代表大会工作报告.doc...
- NPOI合并单元格后边框显示不正确?
- Java Drp项目实战——Drp知多少
热门文章
- CStringArray 字符串数组的使用 以及调试时怎么Dump出其中的内容
- AndroidStudio安卓原生开发_activity之间复杂对象类型的数据传递---Android原生开发工作笔记92
- ASR开发工作笔记0001---Eclipse DS-5-报错Cannot checkout an uncounted license withini a Windows Terminal Servi
- ARM裸机工作笔记0001---ARM那些事
- FPGA工作笔记0001---FPGA简介-强大的逻辑资源和恐怖的IO并行处理能力
- Netty工作笔记0008---NIO的Buffer的机制及子类
- Python工作笔记005---旧式字符串格式化_%5.3f的含义
- kinect 手势识别的原理?
- 3d激光雷达开发(绘制长方体)
- 3d激光雷达开发(PassThrough滤波器)