onloadeddata 事件

在这篇文章中，我将向大家介绍一个非常有用的事件——onloadeddata 事件。该事件会在媒体元素（如、<video>等）的数据加载完成后触发，我们可以利用它来执行一些操作，比如显示加载完成的媒体内容，或者执行一些其他逻辑。

onloadeddata 事件的基本用法

onloadeddata 事件是媒体元素的一个事件属性，当媒体数据加载完成后（如图片或视频加载完成）就会触发这个事件。我们可以通过给媒体元素绑定这个事件来监听数据加载完成的时机。

下面是一个简单的示例代码，演示如何使用 onloadeddata 事件：

-- -------------------- ---- -------
--------- -----
------
------
    ------------------- ------------
-------
------
    ---- ----------------- -----------
    
    --------
        ----- --- - ---------------------------------
        
        ---------------------------------- -- -- -
            -----------------------
            -- -------------------
        ---
    ---------
-------
-------

在这个示例中，我们创建了一个元素，并给它绑定了一个 onloadeddata 事件监听器。当图片加载完成后，控制台会输出"图片加载完成！"这个信息。

onloadeddata 事件的实际应用

除了简单的示例外，onloadeddata 事件还可以在实际项目中发挥很大的作用。比如，在图片懒加载的场景中，我们可以使用 onloadeddata 事件来实现图片的延迟加载。

下面是一个示例代码，演示如何使用 onloadeddata 事件实现图片懒加载：

-- -------------------- ---- -------
--------- -----
------
------
    ----------------------
    -------
        --------- -
            ------ ------
            ------- ------
            ----------- --------
        -
    --------
-------
------
    ---- ---------------- -----------------------------
    
    --------
        ----- ------- - ------------------------------------
        
        -------------------------------------- -- -- -
            ----- --- - ---------------------------------
            ----------------------------- - --------------
        ---
        
        ----------------------------- - -------------------------------------------
    ---------
-------
-------

在这个示例中，我们创建了一个带有"data-src"属性的