jQuery lazyload插件详解

lazyload插件用于图片延迟加载,节省服务器带宽,减少服务器请求次数,提高网站的页面加载速度,用于网站性能优化,只有当图片在窗口可视范围内时才向服务器请求;

参数:

threshold:设置距离窗口底部多少像素开始加载图片,提前加载图片,

failure_limit:lazyload按照瀑布流加载图片,当找到(按照图片在DOM中的位置从上往下)第一张不在可视范围的图片后就停止检测延迟加载图片的位置

如上图,如果每个列表块包含两张图片,failure_limit为0时,当页面滚动到阴影位置时,只会加载第一张图片,因为大图下的头像没有加载,所以会停止加载第二行第二列的图片。所以failure_limit应该设置为一行总显示图片的个数-1,

event:处理图片延迟加载的事件,默认的是window滚动事件,

effect:图片加载效果,

container:处理图片延迟加载的容器,用于触发绑定事件用,

data_attribute:图片延迟加载的图片地址属性后缀,data为前缀,默认为data-original

skip_invisible:用于显示隐藏的图片

appear:用于在图片加载之前到显示图片之间的处理函数,一般用于展示加载动画,

load:用于图片加载完毕之后执行的函数,

placeholder:用于显示图片之前的图片占位符,需要知道图片有宽度和高度

标注:浏览器窗口滚动事件的触发需要窗口的高度(window.innerHeight或$(window).height())和文档高度(document.body.clientHeight或$(document).height())相等才能触发滚动事件,但是如果设置html,body{height:100%;},文档高度和窗口高度一致就无法触发窗口滚动事件。

时间: 2024-08-24 02:52:22

jQuery lazyload插件详解的相关文章

用jQuery开发插件详解

jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQuery对象添加方法.下面就两种函数的开发做详细的说明. 1.类级别的插件开发 类级别的插件开发最直接的理解就是给jQuery类添加类方法,可以理解为添加静态方法.典型的例子就是$.AJAX()这个函数,将函数定义于jQuery的命名空间中.关于类级别的插件开发可以采用如下几种

jQuery Form插件详解

<script src="js/jquery.form.js" type="text/javascript"></script> Jquery Form Plugin是jquery最重要的插件之一,它利用AJAX技术在不引起页面刷新的情况下POST表单.主要有两个方法:ajaxform和 ajaxsubmit.它会自动收集表单元素内容,决定如何管理提交进程.这两个方法支持多重选择.我想AJAX方式的表单应用再没有比这个插件更简单易用的了. 先

JQuery PowerTimer 插件详解

一个jQuery插件,提供定时器以下类型: 1.单运行定时器(又名的setTimeout) 2.反复运行定时器(又名的setInterval) 3.立即运行一个重复的运行计时器,然后等待的时间间隔. 4.反复运行,一定的间隔定时器(见下文睡眠选项). 5.反复运行,一定的间隔计时器,将立即运行,然后等待睡眠时间. 为什么你会使用这个库与常规的setTimeout? 因为它提供了大量的 附加功能! 例如: - 自动定时器ID跟踪. - 暂停和继续后定时器. - 独特的计时器,如果你启动一个定时器两

jQuery 事件用法详解

jQuery 事件用法详解 目录 简介 实现原理 事件操作 绑定事件 解除事件 触发事件 事件委托 事件操作进阶 阻止默认事件 阻止事件传播 阻止事件向后执行 命名空间 自定义事件 事件队列 jquery中文文档 简介 jquery 之所以成为最受欢迎的前端库,很大一部分是得益于它的事件具有良好的语义,优秀的兼容性,并且便于管理和扩展. 在这里我会介绍 jquery 事件的一些比较基础的用法. 实现原理 jquery 事件脱胎于浏览器的 addEventListener (W3) 和 attac

jQuery datepicker参数 详解

DatePicker支持鼠标点选日期,同时还可以通过键盘控制选择: page up/down - 上一月.下一月 ctrl+page up/down - 上一年.下一年 ctrl+home - 当前月或最后一次打开的日期 ctrl+left/right - 上一天.下一天 ctrl+up/down - 上一周.下一周 enter - 确定选择日期 ctrl+end - 关闭并清除已选择的日期 escape - 关闭并取消选择 实用功能: $.datepicker.setDefaults( set

Bootstrap transition.js 插件详解

Bootstrap transition.js 插件详解 时间 2015-01-27 12:12:00 博客园-原创精华区 原文  http://www.cnblogs.com/xyzhanjiang/p/4252513.html 主题 Bootstrap JavaScript Bootstrap 自带的 JavaScript 插件的动画效果几乎都是使用 CSS 过渡实现的,而其中的 transition.js 就是为了判断当前使用的浏览器是否支持 CSS 过渡.下面先来简单了解下 CSS 过渡

jquery的css详解(二)

jq的工具方法style用于设置样式,jq的实例方法css在设置样式时就是调用的它,接下来分析一下源码. jQuery.extend({ ............................ style: function( elem, name, value, extra ) { // Don't set styles on text and comment nodes if ( !elem || elem.nodeType === 3 || elem.nodeType === 8 ||

jQuery选择器代码详解(四)——Expr.preFilter

原创文章,转载请注明出处,多谢! Expr.preFilter是tokenize方法中对ATTR.CHILD.PSEUDO三种选择器进行预处理的方法.具体如下: Expr.preFilter : { "ATTR" : function(match) { /* * 完成如下任务: * 1.属性名称解码 * 2.属性值解码 * 3.若判断符为~=,则在属性值两边加上空格 * 4.返回最终的mtach对象 * * match[1]表示属性名称, * match[1].replace(rune

JQuery选择器代码详解(三)——tokenize方法

原创文章,转载请注明出处,多谢! /* * tokenize函数是选择器解析的核心函数,它将选择器转换成两级数组groups * 举例: * 若选择器为"div.class,span",则解析后的结果为: * group[0][0] = {type:'TAG',value:'div',matches:match} * group[0][1] = {type:'CLASS',value:'.class',matches:match} * group[1][0] = {type:'TAG'