一个轻量级、快速、功能丰富、功能强大且高度可配置的jQuery&;泽普托。
Posted
tags:
中文标题:一个轻量级、快速、功能丰富、功能强大且高度可配置的jQuery&;泽普托。 原文标题:A lightweight, fast, feature-rich, powerful and highly configurable delayed content, image and background lazy loading plugin for jQuery & Zepto. 项目评级:Star:1000 Fork:245 下载地址:https://github.com/dkern/jquery.lazy 详情介绍jQuery&;Zepto Lazy-延迟内容、图像和后台加载程序
这个项目得到了JetBrains&;博士风暴
目录
关于Lazy
Lazy是一个用于jQuery和Zepto的快速、功能丰富且轻量级的延迟内容加载插件。
它的设计目的是通过只加载视图中的内容来加快页面加载时间并减少用户流量。
您可以在所有垂直和水平滚动方式中使用Lazy。
它支持<img />
标签和背景中的图像,默认情况下提供background-image
之类的css。
在这些元素上,Lazy可以在加载时设置默认图像或占位符,并支持视网膜显示。
但Lazy甚至可以通过插件和自定义加载程序加载您想要的任何其他内容。
兼容性
Lazy将与各种浏览器协同工作,并支持jQuery版本多年,Zepto作为替代。
您可以选择自jQuery 1.7.2或Zepto 1.1.6或更高版本以来的任何版本。
没有办法保证Lazy将适用于所有浏览器,但到目前为止,我测试的所有浏览器都很好。
如果您在特定的浏览器中发现任何问题,请告诉我。
测试版本:IE、Chrome(+移动)、Firefox(+移动版)、Safari(+移动版本)和Android浏览器。
文件/示例
有关文档、示例和其他信息,请查看项目页面。
安装
首先,您需要一份jQuery或Zepto的副本才能在项目中成功使用Lazy。
如果你得到了这个,你可以通过不同的方式安装Lazy。
下面的一些例子:
CDN公司
Lazy和所有插件都可以通过cdnjs和jsDelivr CDN获得,并且可以直接包含在每个页面中。
自托管
下载并保存两个可用文件中的一个,以将Lazy包含到您的页面中,无论是开发版还是缩小版。
程序包管理器
Lazy甚至可以通过NPM和Bower获得。
只需使用以下命令之一:
基本用途
1.)Lazy的基本用法非常简单。
首先,您需要准备所有要延迟加载的元素。
默认情况下,为包含可加载图像的图像添加data-src
属性和/或为元素添加data-loader
属性,开关应使用插件或自定义加载程序。
2.)在页面加载后调用Lazy,开始使用它。
您不必精确地指定元素,但为了获得更好的性能或不同的选项,可以通过唯一的类或任何其他选择器加载元素。
查看文档,了解Lazy的能力。
回调/事件
Lazy附带了一系列回调和事件,您可以将其分配给它们。
只需通过初始化设置添加它们:
实例和公共函数
Lazy支持多个并行实例。
只需使用不同的选择器对它们进行初始化即可。
要访问实例公共函数,您可以以面向对象的方式初始化它们,或者默认情况下获取每个元素的实例绑定:
每个实例都有一些公共可用函数来控制其行为。
目前有六种可用:
自定义内容加载程序
有了自定义加载程序选项,就有了一个强大的解决方案,可以以Lazy方式加载所有内容。
Lazy将处理所有事情,您只需创建一个加载方法,每当元素达到可见性阈值时就会触发该方法。
仍然可以在同一个Lazy实例中加载图像和自定义加载程序。
要使用它,只需在Lazy初始化中定义一个加载程序函数,并将加载程序名称传递给应该延迟加载的元素的data-loader
属性。
装载机插件
加载程序插件可以扩展Lazy的功能,就像加载其他元素和数据一样。
这与自定义内容加载器基本相同,不同之处在于插件可以永久地同时全局扩展所有进一步的实例,并允许它们默认处理<video>
等特定元素,而不设置data-loader
属性。
使用自定义内容加载器,您必须在安装时使用加载器初始化每个实例。
有了插件,你只加载插件文件,从现在起所有实例都完成了。
有关更多信息和示例,请查看现有的插件或其中的readme.md。
配置参数
默认情况下,以下配置可用:
<表格>
名称 类型 默认 描述
false
,Lazy将返回创建的插件实例本身以供进一步使用时间>load
'Lazy在页面加载后直接开始工作。如果您想在自己的事件上使用Lazy,请将其设置为event
'时间>both
、vertical
和horizontal
时间>src
属性,其中存储图像路径时间>srcset
属性,存储源集时间>sizes
属性,其中存储源集的大小定义时间>imageBase
配置时间>show
或fadeIn
时间>this
是当前的Lazy实例时间>this
是当前的Lazy指令安斯时间>
this
是当前的Lazy实例时间>this
是当前的Lazy实例时间>表格>
构建和验证
该项目包括一个使用gulp
的自动构建脚本。
要构建自己版本的Lazy,您需要首先通过npm进行安装。
之后,您可以在控制台中使用以下命令自动生成所有生产文件。
在构建这些文件时,所有内容也将用jshint
进行有效性检查。
可用gulp
任务:
<表格>
名称 描述
jshint
的所有文件表格>
错误/功能请求
请报告错误,并随时直接在GitHub上请求新功能。
许可证
Lazy拥有麻省理工学院和GPL-2.0许可证的双重许可。
捐赠物
你愿意支持我吗
你欣赏我的工作吗
你在商业项目中使用它吗
请随意捐款!