vardot/blazy

此包的最新版本（1.8.2.1）没有可用的许可信息。

从 dinbror/blazy 分支出来，用作 drupal-library

维护者

详情

github.com/Vardot/blazy

源代码

安装次数: 3,233,621

依赖者: 14

建议者: 2

安全性: 0

星星: 5

监视者: 5

分支: 356

语言:JavaScript

类型:drupal-library

1.8.2.1 2017-07-16 11:19 UTC

Unknown License 934160a4d6420d26b78371b9d341bac7c6c8ade8

This package is auto-updated.

Last update: 2024-09-17 09:09:18 UTC

README

#hey, be lazy Downloads Latest Stable Version License

bLazy 是一个轻量级的脚本，用于懒加载和多重服务图像、iframe、视频等（小于 1.4KB 压缩和 gzip）。它使用纯 JavaScript 编写，因此不依赖于第三方库，如 jQuery。它允许您懒加载并多重服务您的图像，这样您就可以节省带宽和服务器请求。如果用户没有浏览整个页面，他们将拥有更快的加载时间和节省数据使用。

目录

  1. 演示
  2. 使用 & API
  3. 为什么要懒加载？
  4. 变更日志
  5. 许可

DEMO

http://dinbror.dk/blazy/

更多示例： http://dinbror.dk/blazy/examples/

Codepen playground: http://codepen.io/dinbror/pen/HzCAJ

USAGE & API

http://dinbror.dk/blog/blazy/

安装

您可以使用 npm 安装 blazy.js

npm install blazy --save

或 bower

bower install blazy --save

CDN

如果您不想自己托管脚本，您可以通过链接到最新的压缩文件
//cdn.jsdelivr.net.cn/blazy/latest/blazy.min.js 在 jsDelivr 上。如果您想锁定特定版本，请将 latest 替换为具体的版本号。

为什么要懒加载？

  • bLazy 被用于每月有数百万访问者的大型网站，因此它已经在真实世界中得到了测试。
  • bLazy 是用纯 JavaScript 编写的，因此不依赖于第三方库，如 jQuery。
  • bLazy 轻量级，小于 1.4KB，如果您不需要 IE7- 支持，则小于 1.25KB。
  • bLazy 非常快。它专注于性能，因此在完成懒加载后也会自动销毁。
  • bLazy 可以懒加载所有类型的图像，包括背景图像。
  • bLazy 是面向未来的。它支持 srcset 和 picture 元素。
  • bLazy 可以在视网膜设备上提供视网膜图像。
  • bLazy 可以懒加载具有 src 的所有内容，如 iframe、HTML5 视频、脚本、unity 游戏等。
  • bLazy 支持今天使用的所有浏览器，包括像 IE7 和 8 这样的旧浏览器。
  • bLazy 支持所有主要模块格式，如 AMD、CommonJS 和全局。

您希望的功能/新功能请求

  • 只预加载渐进式 JPEG 的“第一帧”。
  • 添加对 CSS 背景属性的 support； image-set (caniuse)。
  • 在懒加载开始时添加一个类。
  • 选项在屏幕上的图像加载后只加载一次。
  • 添加选项以禁用成功/错误类
  • 动画包含您懒加载的图像的容器。您可以通过在成功回调中添加/删除类来完成此操作。

变更日志

版本 1.8.2（2016/10/25）

  • 在公共 load 函数中增加了空值检查。
  • 错误修复：修复了在 setTimeout 中传递 revalidate 或 destroy 作为引用时默认使用 window 的问题 #73 和 #112。感谢 PeteDuncanson。
  • 错误修复：如果容器的一部分在窗口之外，则使用视口边界 #113 和 #114。感谢 dbirkbeck。

版本 1.8.1（2016/10/22）

  • 错误修复：创建了 polyfill 并检查对在 v. 1.8.0 容器修复中引入的 Element.closest 的支持。

版本 1.8.0（2016/10/16）

  • 错误修复：容器内加载不可见的图像 #23 和 #96。

版本 1.7.1（2016/10/14）

  • 错误修复：在 safari 中，图片元素始终加载默认/回退图像 #92。

版本 1.7.0（2016/10/10）

  • 错误修复：当延迟加载图片元素时，也会加载回退/常规图像 #92 和 108。感谢 @idoshamun
  • 重构了 loadElement 函数以避免冗余。

版本 1.6.4（2016/10/08）

  • 错误修复：在延迟加载 srcset 图像时，也会加载回退/常规图像 #99。感谢 @m0uH

版本 1.6.3（2016/09/30）

  • 将事件监听器更改为被动监听器 #106。感谢 @idoshamun
  • 增加了对 Web 组件（shadow dom）的支持 #107。再次感谢 @idoshamun

版本 1.6.2（2016/05/09）

  • 修复了 v.1.6.0 中引入的 bug，未使用视网膜/断点 src #90。

版本 1.6.1（2016/05/02）

  • 实现了 chrome v50 中引入的 onload/onerror bug 的解决方案，链接。修复了 #85。

版本 1.6.0（2016/04/30）

  • 增加了对 srcset 和图片元素的支持。修复了 #69、#75、#77 和 #82。
  • 增加了对有源视频的延迟加载支持。修复了 #81。
  • 错误修复。确保错误和成功类不会多次添加。修复了 #84。
  • 将 breakpoints 标记为已弃用。将在未来的版本中删除。请使用 srcset 和/或图片元素代替。

版本 1.5.4（2016/03/06）

  • 修复了两个Safari浏览器中的bug：[#66](https://github.com/dinbror/blazy/issues/66) 和 [#78](https://github.com/dinbror/blazy/issues/78)。确保"DOM就绪"。

v 1.5.3 (2016/03/01)

  • 实现了 [#30](https://github.com/dinbror/blazy/pull/30)。保持数据源直到成功。
  • 修复了 [#47](https://github.com/dinbror/blazy/pull/47)。在实现 #30 之后，现在可以在错误/成功回调中获取图像src和更多信息。
  • 向代码库添加了示例页面 /example/index.html。

v 1.5.2 (2015/12/01)

  • 修复了在调用 revalidate() 时添加错误类的小bug。
  • 轻微重构

v 1.5.1 (2015/11/14)

  • 修复了将toArray函数修复为现在可以在IE7 + 8中再次工作。该bug是在1.4.0版本中引入的。感谢@imcotton的反馈。
  • 修复了 [#41](https://github.com/dinbror/blazy/pull/41)。添加了validate和saveViewportOffset延迟选项。

v 1.5.0 (2015/10/30)

  • 添加了新功能。现在您可以像处理iframe、unity游戏等带有src属性的任何内容一样，使用懒加载加载所有内容。
  • 修复了 [#45](https://github.com/dinbror/blazy/issues/45)。现在您可以传递一个选项，如果始终想要加载不可见的图像/元素。
  • 修复了 [#49](https://github.com/dinbror/blazy/issues/49)。扩展了 load 函数，现在可以通过传递元素列表而不是单个元素来传递。已测试getElementById、getElementsByClassName、querySelectorAll、querySelector和jQuery选择器。
  • 修复了 [#63](https://github.com/dinbror/blazy/issues/63)。

v 1.4.1 (2015/10/12)

  • 修复了 [#60](https://github.com/dinbror/blazy/issues/60)。在版本1.4.0的重构中引入了当options为null时出现的"Uncaught TypeError"。

v 1.4.0 (2015/09/28)

  • 修复了 [#56](https://github.com/dinbror/blazy/issues/56)。现在可以创建多个blazy版本，而无需覆盖选项。

v 1.3.1 (2015/02/01)

  • 添加了对类似于CommonJS环境且支持module.exports的环境的支持，如node。

v 1.3.0 (2015/01/23)

  • 修复了 [#34](https://github.com/dinbror/blazy/issues/34)。扩展了公共 load 函数，带有force属性，因此您可以强制加载隐藏的图像。
  • 修复了 [#24](https://github.com/dinbror/blazy/issues/24)、[#32](https://github.com/dinbror/blazy/issues/32) 和 [#35](https://github.com/dinbror/blazy/issues/35)。使用交点检查更新了"elementInView"函数。感谢@teohhanhui。

v 1.2.2 (2014/05/04)

  • 修复了 [#15](https://github.com/dinbror/blazy/issues/15)，当你在另一个标签中调整浏览器窗口大小时，bLazy不会触发新图像。感谢joshribakoff。

v 1.2.1 (2014/03/23)

  • 当懒加载背景图像时，现在它只更新背景-image CSS属性。感谢Saku。

v 1.2.0 (2014/02/15)

  • 重要提示：由于它更具描述性，已将选项multi重命名为 breakpoints。
  • 添加了AMD支持。
  • 轻微重构。

v 1.1.3 (2014/01/21)

  • 修复了硬编码的视网膜检查（isRetina = true）。
  • 修复了当data-src为null时出现的"Uncaught TypeError"。相反，它会触发 error 回调。

v 1.1.2 (2014/01/03)

  • 新功能：在许多请求后，我添加了处理视网膜图像的可能性（如果你不使用视网膜优先）。
  • 新功能：现在您也可以懒加载背景图片。
  • 添加了新的选项 separator。当您想要传递视网膜图片时使用，默认分隔符为‘|’。（data-src=“image.jpg|image@2x.jpg”）。

v 1.1.1 (2013/12/27)

  • 修复 #1，当通过ajax添加元素时，可能断开resize/scroll事件。
  • 添加了新的选项 errorClass。如果发生错误，图片将获得的类名，默认为‘b-error’。
  • 将选项 loadedClass 重命名为 successClass 以保持命名一致性。默认值仍然是‘b-loaded’。

v 1.1.0 (2013/11/22)

  • 将成功回调从 onLoaded 重命名为 success。
  • 添加了 onerror 回调；error。
  • 添加了传递多个容器而不是单个容器的可能性。

v 1.0.5 (2013/10/7)

  • 修复了当容器不是默认（window）时出现的 "Uncaught TypeError"。

v 1.0.4 (2013/8/29)

  • 添加了null检查，因此我们不会尝试加载缺少数据源的图片。

v 1.0.3 (2013/8/27)

  • 添加了新的选项 loadedClass。图片加载时将获得的类名。
  • 添加了对水平懒加载的支持。
  • 减少了 validate 的节流时间。

v 1.0.2 (2013/8/7)

  • 修复了 unbindEvent 函数中的错误。
  • 如承诺添加了对 IE7 的支持（querySelectorAll 的回退）。

v 1.0.1 (2013/8/6)

  • 性能改进。
  • 添加了节流函数，以确保不会频繁调用 resize/scroll 函数。
  • 图片加载时清理图片标记。

##LICENSE：版权所有（c）2013-16 Bjørn Klinggaard。根据 MIT 许可证（MIT） 许可。