vanilla lazyload下载 - vanilla lazyload源代码下载

LazyLoad 是一个轻量级 (2.4 kB) 且灵活的脚本，它通过将首屏图像、动画 SVG、视频和 iframe 的加载延迟到它们进入视口的时间来加速 Web 应用程序。它是用简单的“vanilla”JavaScript 编写的，它利用 IntersectionObserver API，它支持响应式图像，它优化您的网站以降低连接速度，并且可以启用本机延迟加载。查看所有功能了解更多信息。

➡️ 跳转至： ?‍ 入门 - HTML - ?‍ 入门 - 脚本 - ?食谱 - 演示 - ？提示和技巧 - ？ API-？所有功能比较

喜欢这个项目吗？？给我买杯咖啡吧！

?‍ 入门 - HTML

为了使您的内容能够被 LazyLoad 加载，您必须使用一些data-属性而不是实际的属性。下面的例子。

懒惰的形象：

 < img alt =" A lazy image " class =" lazy " data-src =" lazy.jpg " />

具有低质量占位符的惰性图像：

 < img alt =" A lazy image " class =" lazy " src =" lazy-lowQuality.jpg " data-src =" lazy.jpg " />

具有`srcset`和`sizes`惰性响应图像：

 < img
  alt =" A lazy image "
  class =" lazy "
  data-src =" lazy.jpg "
  data-srcset =" lazy_400.jpg 400w, 
    lazy_800.jpg 800w "
  data-sizes =" 100w "
/>

要使用低质量占位符，请添加指向图像的非常小的版本的src属性。例如src="lazy_10.jpg" 。

使用`picture`标签支持高 dpi 的惰性响应图像：

 < picture >
  < source media =" (min-width: 1200px) " data-srcset =" lazy_1200.jpg 1x, lazy_2400.jpg 2x " />
  < source media =" (min-width: 800px) " data-srcset =" lazy_800.jpg 1x, lazy_1600.jpg 2x " />
  < img alt =" A lazy image " class =" lazy " data-src =" lazy.jpg " />
</ picture >

要使用低质量占位符，请将指向图像的非常小的版本的src属性添加到img标记中。例如src="lazy_10.jpg" 。

使用`picture`标签自动选择WebP格式的惰性响应图像：

 < picture >
  < source
    type =" image/webp "
    data-srcset =" lazy_400.webp 400w, 
      lazy_800.webp 800w "
    data-sizes =" 100w "
  />
  < img
    alt =" A lazy image "
    class =" lazy "
    data-src =" lazy.jpg "
    data-srcset =" lazy_400.jpg 400w, 
      lazy_800.jpg 800w "
    data-sizes =" 100w "
  />
</ picture >

要使用低质量占位符，请将指向图像的非常小的版本的src属性添加到img标记中。例如src="lazy_10.jpg" 。

懒惰的背景图片

重要提示：要在页面上显示内容图像，请始终使用img标签。这将有利于搜索引擎优化和网站的可访问性。要了解您的图像是内容还是背景，请问问自己：“我的网站用户希望在打印页面时看到这些图像吗？”。如果答案是“是”，那么您的图像就是内容图像，您应该避免使用背景图像来显示它们。

单一背景图片：

 < div class =" lazy " data-bg =" lazy.jpg " > </ div >

单一背景，支持 HiDPI 屏幕：

 < div class =" lazy " data-bg =" lazy.jpg " data-bg-hidpi =" [email protected] " > </ div >

多种背景：

 < div
  class =" lazy "
  data-bg-multi =" url(lazy-head.jpg), 
    url(lazy-body.jpg), 
    linear-gradient(#fff, #ccc) "
>
  ...
</ div >

多种背景，HiDPI 屏幕支持：

 < div
  class =" lazy "
  data-bg-multi =" url(lazy-head.jpg),
    url(lazy-body.jpg),
    linear-gradient(#fff, #ccc) "
  data-bg-multi-hidpi =" url([email protected]),
    url([email protected]),
    linear-gradient(#fff, #ccc) "
>
  ...
</ div >

带有`image-set`背景：

 < div class =" lazy " data-bg-set =" url('[email protected]') 1x, url('[email protected]') 2x " > ... </ div >

具有`image-set`多个背景：

 < div
  class =" lazy "
  data-bg-set ="
    url('[email protected]') 1x, url('[email protected]') 2x | 
    url('[email protected]') 1x, url('[email protected]') 2x
  "
>
  ...
</ div >

懒惰的动画 SVG

 < object class =" lazy " type =" image/svg+xml " data-src =" lazy.svg " > </ object >

懒视频

 < video class =" lazy " controls width =" 620 " data-src =" lazy.mp4 " data-poster =" lazy.jpg " >
  < source type =" video/mp4 " data-src =" lazy.mp4 " />
  < source type =" video/ogg " data-src =" lazy.ogg " />
  < source type =" video/avi " data-src =" lazy.avi " />
</ video >

请注意，视频海报也可以延迟加载。

惰性 iframe

 < iframe class =" lazy " data-src =" lazyFrame.html " > </ iframe >

喜欢这个项目吗？？给我买杯咖啡吧！

?‍ 入门 - 脚本

LazyLoad 的最新推荐版本是19.1.3 。请注意，如果需要支持 Internet Explorer 11，则需要使用 17.9.0 或更低版本。

阅读实用升级指南，快速了解如何从先前版本升级。

最简单、最容易的方法

使用 LazyLoad 的最简单方法是包含来自 CDN 的脚本。

 < script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js " > </ script >

或者，如果您希望将其作为 ES 模块导入：

 < script type =" module " >
  import LazyLoad from "https://cdn.jsdelivr.net/npm/[email protected]/+esm" ;
</ script >

然后，在您的 javascript 代码中：

 var lazyLoadInstance = new LazyLoad ( {
  // Your custom settings go here
} ) ;

为了确保在实例化 LazyLoad 时，惰性内容的 DOM 已准备就绪，请将脚本标记放在结束</body>标记之前。

如果稍后有更多 DOM 到达，例如通过 AJAX 调用，您将需要调用lazyLoadInstance.update();让 LazyLoad 再次检查 DOM。

 lazyLoadInstance . update ( ) ;

使用`async`脚本

如果您愿意，可以使用async脚本包含 LazyLoad 的脚本，并在加载后立即对其进行初始化。

为此，您必须在包含脚本之前定义选项。您可以通过：

{}一个对象，用于获取 LazyLoad 的单个实例
[{}, {}]一组对象，用于获取 LazyLoad 的多个实例，每个实例都有不同的选项。

 < script >
  // Set the options globally
  // to make LazyLoad self-initialize
  window . lazyLoadOptions = {
    // Your custom settings go here
  } ;
</ script >

然后包含脚本。

 < script
  async
  src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js "
> </ script >

可以将 script 标签放在结束</body>标签之前。如果你不能这样做，LazyLoad 可能会在浏览器加载所有 DOM 之前执行，并且你需要调用它的update()方法以使其再次检查 DOM。

使用`async`脚本+获取实例引用

与上面相同，但您必须在包含async脚本之前放置如下所示的addEventListener代码。

 < script >
  // Set the options globally
  // to make LazyLoad self-initialize
  window . lazyLoadOptions = {
    // Your custom settings go here
  } ;
  // Listen to the initialization event
  // and get the instance of LazyLoad
  window . addEventListener (
    "LazyLoad::Initialized" ,
    function ( event ) {
      window . lazyLoadInstance = event . detail . instance ;
    } ,
    false
  ) ;
</ script >

然后包含脚本。

 < script
  async
  src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js "
> </ script >

现在您将能够调用它的方法，例如：

 lazyLoadInstance . update ( ) ;

演示 - 源 ← 对于单个 LazyLoad 实例

演示 - 源 ← 用于多个 LazyLoad 实例

本地安装

如果您希望在项目中本地安装 LazyLoad，您可以！

使用 npm

 npm install vanilla-lazyload

使用凉亭

 bower install vanilla-lazyload

说明书下载

下载最新版本之一。您需要的文件位于dist文件夹内。如果您不知道选择哪一个，请使用lazyload.min.js ，或阅读有关捆绑包的信息。

本地使用

如果您在本地安装 LazyLoad，则可以将其作为 ES 模块导入，如下所示：

 import LazyLoad from "vanilla-lazyload" ;

也可以（但不建议）使用require commonJS 语法。

有关将 LazyLoad 与 WebPack 捆绑在一起的更多信息可在此特定存储库中找到。

与 React 一起使用

看一下在 Sandbox 上使用 React 和 LazyLoad 的示例。

此实现采用与通常传递给img标签相同的 props，但它呈现惰性图像。请随意分叉并改进它！

捆绑包

在dist文件夹中，您会发现不同的捆绑包。

文件名	模块类型	优点
`lazyload.min.js`	UMD（通用模块定义）	几乎在任何地方都可以工作，甚至在 common-js 上下文中也是如此
`lazyload.iife.min.js`	IIFE（立即调用函数表达式）	作为页内`<script src="...">`运行，比 UMD 版本小 ~0.5kb
`esm/lazyload.js`	ES模块	导出`LazyLoad` ，以便您可以使用`<script type="module" src="...">`和 WebPack 或 Rollup 等捆绑器将其导入项目中

喜欢这个项目吗？？给我买杯咖啡吧！

？食谱

为了方便起见，您可以在此部分中找到复制和粘贴代码的准备。

隐藏替代文本和空图像

用例：当您延迟加载的图像在加载之前显示其alt文本和空图像图标时。

CSS

 img : not ([ src ]) : not ([ srcset ]) {
  visibility : hidden;
}

就是这样，真的。

图像错误处理

使用案例：当您想防止在网站上显示不存在/损坏的图像时。

JavaScript

 var myLazyLoad = new LazyLoad ( {
  // Other options here...
  callback_error : ( img ) => {
    // Use the following line only if your images have the `srcset` attribute
    img . setAttribute ( "srcset" , "[email protected] 1x, [email protected] 2x" ) ;
    img . setAttribute ( "src" , "[email protected]" ) ;
  }
} ) ;

注意：如果错误是由网络关闭（导航器暂时离线）生成的，vanilla-lazyload 将在网络再次可用时尝试再次加载图像。

示例 - API

动态内容

用例：当你想要延迟加载图像，但滚动区域中的图像数量发生变化时，可能是因为它们是异步添加的。

JavaScript

 var myLazyLoad = new LazyLoad ( ) ;
// After your content has changed...
myLazyLoad . update ( ) ;

演示 - 源 - API

混合原生和基于 JS 的延迟加载

使用案例：您希望使用use_native选项将图像、iframe 和视频的加载委托给支持的浏览器引擎，但您也希望延迟加载背景图像。

超文本标记语言

 < img class =" lazy " alt =" A lazy image " data-src =" lazy.jpg " />
< iframe class =" lazy " data-src =" lazyFrame.html " > </ iframe >
< video class =" lazy " controls data-src =" lazy.mp4 " data-poster =" lazy.jpg " > ... </ video >
< object class =" lazy " type =" image/svg+xml " data-src =" lazy.svg " > </ object >
< div class =" lazy " data-bg =" lazy.jpg " > </ div >

JavaScript

 // Instance using native lazy loading
const lazyContent = new LazyLoad ( {
  use_native : true // <-- there you go
} ) ;

// Instance without native lazy loading
const lazyBackground = new LazyLoad ( {
  // DON'T PASS use_native: true HERE
} ) ;

演示 - 源 - API

滚动面板

使用案例：当您的滚动容器不是主浏览器窗口，而是滚动容器时。

超文本标记语言

 < div class =" scrollingPanel " >
  <!-- Set of images -->
</ div >

JavaScript

 var myLazyLoad = new LazyLoad ( {
  container : document . querySelector ( ".scrollingPanel" )
} ) ;

演示 - 源 - API

如果您有多个滚动面板，则可以使用以下标记和代码。

超文本标记语言

 < div id =" scrollingPanel1 " class =" scrollingPanel " >
  <!-- Set of images -->
</ div >
< div id =" scrollingPanel2 " class =" scrollingPanel " >
  <!-- Set of images -->
</ div >

JavaScript

 var myLazyLoad1 = new LazyLoad ( {
  container : document . getElementById ( "scrollingPanel1" )
} ) ;
var myLazyLoad2 = new LazyLoad ( {
  container : document . getElementById ( "scrollingPanel2" )
} ) ;

演示 - 源 - API

惰性函数

用例：当给定元素进入视口时，您想要执行任意脚本或函数

超文本标记语言

 < div class =" lazy " data-lazy-function =" foo " > ... </ div >
< div class =" lazy " data-lazy-function =" bar " > ... </ div >
< div class =" lazy " data-lazy-function =" buzz " > ... </ div >
< div class =" lazy " data-lazy-function =" booya " > ... </ div >

 // It's a best practice to scope the function names inside a namespace like `lazyFunctions`.
window . lazyFunctions = {
  foo : function ( element ) {
    element . style . color = "red" ;
    console . log ( "foo" ) ;
  } ,
  bar : function ( element ) {
    element . remove ( element ) ;
    console . log ( "bar" ) ;
  } ,
  buzz : function ( element ) {
    var span = document . createElement ( "span" ) ;
    span . innerText = " - buzz!" ;
    element . appendChild ( span ) ;
    console . log ( "buzz" ) ;
  } ,
  booya : function ( element ) {
    element . classList . add ( "boo" ) ;
    console . log ( "booya" ) ;
  }
} ;

 function executeLazyFunction ( element ) {
  var lazyFunctionName = element . getAttribute ( "data-lazy-function" ) ;
  var lazyFunction = window . lazyFunctions [ lazyFunctionName ] ;
  if ( ! lazyFunction ) return ;
  lazyFunction ( element ) ;
}

var ll = new LazyLoad ( {
  unobserve_entered : true , // <- Avoid executing the function multiple times
  callback_enter : executeLazyFunction // Assigning the function defined above
} ) ;

使用unobserve_entered以避免多次执行该函数。

就是这样。每当具有data-lazy-function属性的元素进入视口时，LazyLoad 都会调用executeLazyScript函数，该函数从data-lazy-function属性本身获取函数名称并执行它。

演示 - 源 - API

多个 LazyLoad 实例的延迟初始化

用例：当您有很多水平滚动容器并且您想要在它们上实例化 LazyLoad 实例时，但仅当它们进入视口时。

超文本标记语言

 < div class =" horizContainer " >
  < img
    src =""
    alt =" Row 01, col 01 "
    data-src =" https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_01_col_01&amp;w=200&amp;h=200 "
  />
  < img
    src =""
    alt =" Row 01, col 02 "
    data-src =" https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_01_col_02&amp;w=200&amp;h=200 "
  />
  <!-- ... -->
</ div >
< div class =" horizContainer " >
  < img
    src =""
    alt =" Row 02, col 01 "
    data-src =" https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_02_col_01&amp;w=200&amp;h=200 "
  />
  < img
    src =""
    alt =" Row 02, col 02 "
    data-src =" https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_02_col_02&amp;w=200&amp;h=200 "
  />
  <!-- ... -->
</ div >

JavaScript

 var lazyLoadInstances = [ ] ;

var initOneLazyLoad = function ( horizContainerElement ) {
  // When the .horizContainer element enters the viewport,
  // instantiate a new LazyLoad on the horizContainerElement
  var oneLL = new LazyLoad ( {
    container : horizContainerElement
  } ) ;
  // Optionally push it in the lazyLoadInstances
  // array to keep track of the instances
  lazyLoadInstances . push ( oneLL ) ;
} ;

// The "lazyLazy" instance of lazyload is used to check
// when the .horizContainer divs enter the viewport
var lazyLazy = new LazyLoad ( {
  elements_selector : ".horizContainer" ,
  callback_enter : initOneLazyLoad ,
  unobserve_entered : true // Stop observing .horizContainer(s) after they entered
} ) ;

就是这样。每当.horizContainer元素进入视口时，LazyLoad 都会调用initOneLazyLoad函数，该函数会在.horizContainer元素上创建 LazyLoad 的新实例。

演示 - 源 - API

喜欢这个项目吗？？给我买杯咖啡吧！

演示

没有找到完全符合您情况的食谱？我们有演示！

demos 文件夹包含 30 多个 vanilla-lazyload 用例。您可能会在那里找到您正在寻找的东西。

类型	标题	代码	演示
内容	简单的延迟加载图像，不使用任何占位符	代码	居住
内容	使用内联 SVG 作为占位符的惰性图像	代码	居住
内容	使用外部 SVG 文件作为占位符的惰性图像	代码	居住
内容	使用`srcset`的惰性响应图像	代码	居住
内容	带有`<picture>`标签和`media`属性的惰性响应图像（艺术指导）	代码	居住
内容	具有`srcset`和`sizes`惰性响应图像（使用`data-sizes` ）	代码	居住
内容	具有`srcset`和`sizes`的惰性响应图像（使用普通`sizes` ）	代码	居住
内容	具有多个`<source>`标签的惰性视频、不同的预加载选项、无自动播放	代码	居住
内容	具有多个`<source>`标签、不同预加载选项、带自动播放的惰性视频	代码	居住
内容	延迟加载背景图像	代码	居住
内容	延迟加载多个背景图像	代码	居住
内容	使用`image-set()`延迟加载背景图像	代码	居住
内容	延迟加载 iframe	代码	居住
内容	延迟加载动画 SVG 和 PDF 文件	代码	居住
内容	带有`<picture>`标签和 WebP 的`type`属性的惰性 WebP 图像	代码	居住
加载中	使用`<script async>`异步加载 LazyLoad	代码	居住
加载中	使用`<script async>`异步加载多个 LazyLoad 实例	代码	居住
错误	当`restore_on_error`为`false`时测试错误加载行为	代码	居住
错误	当`restore_on_error`为`true`时测试错误加载行为	代码	居住
技术	图像加载时淡入淡出	代码	居住
技术	仅 CSS 水平滑块中的延迟加载图像（Netflix 风格）	代码	居住
技术	延迟创建 Swiper 实例并延迟加载 Swiper 图像	代码	居住
技术	当特定元素进入视口时延迟执行函数	代码	居住
技术	如何管理包含惰性图像的页面的打印	代码	居住
技术	滚动容器中包含惰性图像的弹出层	代码	居住
设置	多个滚动容器	代码	居住
设置	单滚动容器	代码	居住
方法	如何将 DOM `restore()`到原始状态，和/或`destroy()` LazyLoad	代码	居住
方法	添加动态内容，然后`update()` LazyLoad	代码	居住
方法	添加动态内容，然后`update()` LazyLoad 传递元素的 NodeSet	代码	居住
方法	使用`load()`方法加载准时图像	代码	居住
方法	使用`loadAll()`一次加载所有图像	代码	居住
测试	测试多个阈值	代码	居住
测试	使用隐藏图像测试行为	代码	居住
测试	测试性能，懒加载上百张图片	代码	居住
本国的	测试图像的本机延迟加载，无需任何 javascript 行，甚至无需此脚本	代码	居住
本国的	使用`use_native`选项有条件地测试图像的本机延迟加载（请参阅 API）	代码	居住

喜欢这个项目吗？？给我买杯咖啡吧！

？提示和技巧

展开

vanilla lazyload

?‍ 入门 - HTML

懒惰的形象：

具有低质量占位符的惰性图像：

具有srcset和sizes惰性响应图像：

使用picture标签支持高 dpi 的惰性响应图像：

使用picture标签自动选择WebP格式的惰性响应图像：

懒惰的背景图片

单一背景图片：

单一背景，支持 HiDPI 屏幕：

多种背景：

多种背景，HiDPI 屏幕支持：

带有image-set背景：

具有image-set多个背景：

懒惰的动画 SVG

懒视频

惰性 iframe

?‍ 入门 - 脚本

最简单、最容易的方法

使用async脚本

使用async脚本+获取实例引用

本地安装

使用 npm

使用凉亭

说明书下载

本地使用

与 React 一起使用

捆绑包

？食谱

隐藏替代文本和空图像

图像错误处理

动态内容

混合原生和基于 JS 的延迟加载

滚动面板

惰性函数

多个 LazyLoad 实例的延迟初始化

演示

？提示和技巧

具有`srcset`和`sizes`惰性响应图像：

使用`picture`标签支持高 dpi 的惰性响应图像：

使用`picture`标签自动选择WebP格式的惰性响应图像：

带有`image-set`背景：

具有`image-set`多个背景：

使用`async`脚本

使用`async`脚本+获取实例引用