一个轻量级、快速、功能丰富、功能强大且高度可配置的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。

配置参数

默认情况下,以下配置可用:

<表格>

名称

类型

默认

描述

名称

字符串

“懒惰”

内部名称,用于命名空间和绑定

可链接的

布尔值

真实的

默认情况下,Lazy是可链接的,并且将返回所有元素。如果设置为false,Lazy将返回创建的插件实例本身以供进一步使用

自动销毁

布尔值

真实的

当没有其他元素可供处理时,将自动销毁实例

绑定

字符串

“加载”

如果设置为load'Lazy在页面加载后直接开始工作。如果您想在自己的事件上使用Lazy,请将其设置为event'

阈值

整数

500

视口下方的像素量,在用户看到这些图像之前,所有图像都会加载到视口中

仅可见

布尔值

虚假的

确定是否只应加载可见元素

追加滚动

整数

窗口

一个用于监听滚动事件的元素,当图像存储在容器中时非常有用

滚动方向

字符串

'两者'

确定控制柄滚动方向。可能值为bothverticalhorizontal

图像库

字符串

无效

如果已定义,则此路径将用作此实例加载的所有图像的基本路径

默认图像

字符串

空白图像

Base64图像字符串,设置为每个没有预定义源属性的图像的默认图像源

占位符

字符串

无效

Base64图像字符串,在每个元素上设置一个背景作为加载占位符

延迟

整数

-1个

如果要在页面加载后一次加载所有元素,则可以指定以毫秒为单位的延迟时间

组合的

布尔值

虚假的

使用此参数,Lazy将结合事件驱动和延迟元素加载

属性

属性

字符串

'数据src'

图像标签的名称src属性,其中存储图像路径

srcset属性

字符串

'数据srcset'

图像标签的名称srcset属性,存储源集

大小属性

字符串

'数据大小'

图像标签的名称sizes属性,其中存储源集的大小定义

视网膜属性

字符串

“数据视网膜”

图像标签属性的名称,其中存储可选视网膜图像的路径

加载程序属性

字符串

'数据加载程序'

名称或元素属性,其中包含插件或客户加载程序的标识符

图像基本属性

字符串

'数据图像库'

存储特定图像库的图像标记元素的名称。这将覆盖全局imageBase配置

removeAttribute(移除属性)

布尔值

真实的

确定是否应在加载后从元素中删除该属性

处理的名称

字符串

'已处理'

元素标记数据属性的名称,用于确定元素是否已被处理

加载的名称

字符串

“已加载”

元素标记数据属性的名称,用于确定元素是否已加载

效果

效果

字符串

“显示”

要用于显示加载图像的效果的函数名称,如showfadeIn

有效时间

整数

0个

效果用于查看图像的时间(以毫秒为单位)

节气门

启用油门

布尔值

真实的

对滚动事件的加载调用进行节流

节气门

整数

250个

油门将用于限制加载调用的时间(以毫秒为单位)

回调

加载前

函数

未定义的

回调函数,它将在加载元素之前被调用。具有电流元件和响应功能作为参数。this是当前的Lazy实例

后负载

函数

未定义的

回调函数,该函数将在加载元素后调用。具有电流元件和响应功能作为参数。this是当前的Lazy指令

安斯

on错误

函数

未定义的

回调函数,如果无法加载元素,将调用该函数。具有电流元件和响应功能作为参数。this是当前的Lazy实例

完成时全部

函数

未定义的

回调函数,它将在加载所有元素或返回错误后调用。回调没有参数。this是当前的Lazy实例

构建和验证

该项目包括一个使用gulp的自动构建脚本。

要构建自己版本的Lazy,您需要首先通过npm进行安装。

之后,您可以在控制台中使用以下命令自动生成所有生产文件。

在构建这些文件时,所有内容也将用jshint进行有效性检查。

可用gulp任务:

<表格>

名称

描述

建造

检查&;构建所有内容

构建主管道

检查&;生成主项目文件

构建插件

检查&;生成单个插件文件

concat插件

构建串联插件文件

验证

检查jshint的所有文件

手表

监视所有要检查的文件&;一切都建立在变化之上

错误/功能请求

请报告错误,并随时直接在GitHub上请求新功能。

许可证

Lazy拥有麻省理工学院和GPL-2.0许可证的双重许可。

捐赠物

你愿意支持我吗

你欣赏我的工作吗

你在商业项目中使用它吗

请随意捐款!

Flask快速入门

flask框架有啥用?

CentOS 7.3安装配置Powerline

使用Powerline为VIM和Bash注入强劲动力

echarts插件的使用

dnsmasq轻量级DNS安装配置