cobenash/blazy

此包最新版本（dev-master）没有提供许可证信息。

bLazy 是一个轻量级的脚本，用于懒加载和多服务器图像、iframe、视频等。

维护者

详细信息

github.com/cobenash/blazy

源代码

安装: 35

依赖项: 0

建议者: 0

安全: 0

星级: 0

关注者: 1

分支: 356

语言：JavaScript

类型：drupal-library

dev-master 2019-01-26 09:48 UTC

Unknown License 25bda38d013bc073961c89bb37edf3e68583149d

drupallazy-loadbLazy

This package is auto-updated.

Last update: 2024-09-26 22:39:23 UTC

README

嘿，偷点懒 下载 最新稳定版本 许可证

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

目录

  1. 演示
  2. 使用 & API
  3. 为什么要偷懒？
  4. 更改日志
  5. 许可证

DEMO

http://dinbror.dk/blazy/

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

Codepen游乐场： http://codepen.io/dinbror/pen/HzCAJ

使用 & 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 背景属性的支持； image-set (caniuse)。
  • 当懒加载开始时添加一个类。
  • 选项在屏幕上的图像加载后一次性加载。
  • 添加禁用成功/错误类的选项
  • 动画处理包含懒加载图片的容器。您可以通过在成功回调中添加/删除一个类来实现这一点。

变更日志

v 1.8.2 (2016/10/25)

  • 在公共 load 函数中增加了空值检查。
  • 错误修复：修复了当在 setTimeout 中传递 revalidate 或 destroy 作为引用时，默认将 this 设置为 window 的问题。[问题 #73](https://github.com/dinbror/blazy/issues/73) 和 [问题 #112](https://github.com/dinbror/blazy/pull/112)。感谢 PeteDuncanson。
  • 错误修复：如果容器的部分超出了窗口范围，则使用视口边界。[问题 #113](https://github.com/dinbror/blazy/issues/113) 和 [问题 #114](https://github.com/dinbror/blazy/pull/114)。感谢 dbirkbeck。

v 1.8.1 (2016/10/22)

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

v 1.8.0 (2016/10/16)

  • 错误修复：在容器内部加载了不可见的图片。[问题 #23](https://github.com/dinbror/blazy/issues/23) 和 [问题 #96](https://github.com/dinbror/blazy/issues/96)。

v 1.7.1 (2016/10/14)

  • 错误修复：在 safari 中，图片元素始终加载默认/后备图像。[问题 #92](https://github.com/dinbror/blazy/issues/92)。

v 1.7.0 (2016/10/10)

  • 错误修复：在懒加载图片元素时，还加载了后备/常规图像。[问题 #92](https://github.com/dinbror/blazy/issues/92) 和 [问题 #108](https://github.com/dinbror/blazy/pull/108)。感谢 @idoshamun。
  • 重构了 loadElement 函数以避免冗余。

v 1.6.4 (2016/10/08)

  • 错误修复：在懒加载 srcset 图像时，也加载了后备/常规图像。[问题 #99](https://github.com/dinbror/blazy/pull/99)。感谢 @m0uH。

v 1.6.3 (2016/09/30)

  • 将事件监听器更改为被动监听器。[问题 #106](https://github.com/dinbror/blazy/pull/106)。感谢 @idoshamun。
  • 添加了对 Web 组件（shadow dom）的支持。[问题 #107](https://github.com/dinbror/blazy/pull/107)。再次感谢 @idoshamun。

v 1.6.2 (2016/05/09)

  • 修复了在 v.1.6.0 中引入的 bug，未使用视网膜/断点 src。[问题 #90](https://github.com/dinbror/blazy/issues/90)。

v 1.6.1 (2016/05/02)

  • 实现了针对 chrome v50 中引入的 onload/onerror bug 的解决方案。[链接](https://productforums.google.com/forum/#!topic/chrome/p51Lk7vnP2o)。修复了 [问题 #85](https://github.com/dinbror/blazy/issues/85)。

v 1.6.0 (2016/04/30)

  • 添加了对 srcset 和图片元素的支持。修复了 [问题 #69](https://github.com/dinbror/blazy/issues/69)、[问题 #75](https://github.com/dinbror/blazy/issues/75)、[问题 #77](https://github.com/dinbror/blazy/issues/77) 和 [问题 #82](https://github.com/dinbror/blazy/issues/82)。
  • 添加了对具有来源的视频的懒加载支持。[问题 #81](https://github.com/dinbror/blazy/issues/81)。
  • 错误修复：确保错误和成功类不会被多次添加。修复了 [问题 #84](https://github.com/dinbror/blazy/issues/84)。
  • 将 breakpoints 标记为已废弃。将在未来的版本中删除。请使用 srcset 和/或图片元素代替。

v 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 ready"。

版本 1.5.3 (2016/03/01)

  • 实现了#30。在成功前保持数据源。
  • 修复了#47。在实现#30后，现在可以在错误/成功回调中获取图像src和更多信息。
  • 将示例页面添加到仓库 /example/index.html。

版本 1.5.2 (2015/12/01)

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

版本 1.5.1 (2015/11/14)

  • 修复了将toArray函数修复到在IE7 + 8中再次工作。1.4.0版本中引入的bug。感谢@imcotton的反馈。
  • 修复了#41。添加了验证和保存视口偏移延迟的选项。

版本 1.5.0 (2015/10/30)

  • 添加了新功能。现在您可以像iframe、unity游戏等带有src属性的任何内容一样懒加载。
  • 修复了#45。现在，如果您始终希望加载不可见的图像/元素，则可以传递一个选项。
  • 修复了#49。扩展了load函数，现在可以通过传递元素列表而不是单个元素来传递。已测试getElementById、getElementsByClassName、querySelectorAll、querySelector和jQuery选择器。
  • 修复了#63。

版本 1.4.1 (2015/10/12)

  • 修复了#60。在版本1.4.0的重构中引入了当选项为null时的“未捕获的类型错误”。

版本 1.4.0 (2015/09/28)

  • 修复了#56。现在可以创建多个blazy版本，而不会覆盖选项。

版本 1.3.1 (2015/02/01)

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

版本 1.3.0 (2015/01/23)

  • 修复了#34。扩展了公共load函数，并添加了强制属性，因此您可以强制加载隐藏的图像。
  • 修复了#24、#32和#35。使用交点检查更新了“elementInView”函数。感谢@teohhanhui。

版本 1.2.2 (2014/05/04)

  • 修复了#15，当您在另一个选项卡中调整浏览器窗口大小时，bLazy不会触发新图像。感谢joshribakoff。

版本 1.2.1 (2014/03/23)

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

版本 1.2.0 (2014/02/15)

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

版本 1.1.3 (2014/01/21)

  • 修复了硬编码的视网膜检查（isRetina = true）。
  • 修复了当data-src为null时的“未捕获的类型错误”。相反，它将触发error回调。

版本 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）

  • 性能改进。
  • 添加了throttle函数以确保不会过于频繁地调用resize/scroll函数。
  • 当图像加载时清理图像标记。

##LICENSE：版权所有（c）2013-16 Bjørn Klinggaard。在MIT许可证（MIT）下授权。The MIT License (MIT)。