延迟加载 MDB Pro component

延迟加载-Bootstrap 5和Material Design 2.0

Bootstrap 5延迟加载是一项功能,它允许您仅在图像或视频时才加载它们 在屏幕上可见。

注意:阅读 API 标签以找到所有可用选项,然后 高级定制


基本例子

.lazy 类添加到您的计算机后,延迟加载将自动初始化 img video 元素。重要的是要添加 data-mdb-lazy-src 属性-否则,延迟加载将引发错误。

Scroll down to see an image

Example image

抵消

使用 data-mdb-lazy-offset 属性在之后定义额外的像素数量 将显示哪个图像或视频。

向下滚动以加载图片。

Example image

错误

使用 data-mdb-lazy-error 定义一幅图片,该图片将显示图像还是视频 不加载。

Example image

动画制作

使用 data-mdb-lazy-animation 指定要在激活时激活的动画 单元载荷。

Example image
Example image

容器

通过将 .lazy 类添加到其容器中,可以一次初始化一组元素。如果 您可以在父级,所有 img 和所有父级中设置 data-mdb-lazy 属性 里面的 video 元素将继承它们。您可以通过声明覆盖它们 这些属性在内部元素中。

Example image Example image

延迟加载 - API


用法

通过数据属性


        <img
          data-mdb-lazy-src="https://mdbootstrap.com/img/Photos/Slides/img%20(102).webp"
          data-mdb-lazy-delay="1000"
          data-mdb-lazy-placeholder="https://placehold.it/1321x583?text=Loading"
          data-mdb-lazy-animation="shake"
          alt="Example image"
          class="img-fluid lazy"
        />
      

通过JavaScript


        const lazyElement = new mdb.LazyLoad(document.getElementById('lazyElement'), { 
          lazySrc: '...',
          lazyPlaceholder: '...', 
          lazyError: '...', 
        });
      

通过jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own.

 $('.example-class').lazyLoad(options); 

选件

Name Type Default Description
lazy-src String '...' Defines the source of an element
lazy-delay Number 500 Defines delay after which element will show
lazy-animation String 'fade-in' Defines animation during element showing
lazy-offset Number 0 Defines an additional offset after which element will show
lazy-placeholder String - Defines a picture that is shown before loading a proper element
lazy-error String - Defines a picture that is shown if an error with showing element occurs

方法

Name Description Example
dispose Removes an instance of the lazy element lazyElement.dispose()

        mdb.lazyLoad.getInstance(document.getElementById('example-element')).dispose();
      

大事记

Name Description
onLoad.mdb.lazy This event fires immediately when an image is loaded.
onError.mdb.lazy This event fires immediately when an error with loading image occurs.

        const lazyLoadInstance =
        mdb.lazyLoad.getInstance(document.getElementById('example-element'));
        lazyLoadInstance.addEventListener('onLoad.mdb.lazy', () => { // do something });
      

进口

MDB UI KIT 也可与模块捆绑器一起使用。使用以下代码导入 此组件:

 import { LazyLoad } from 'mdb-ui-kit';