onloadeddata 事件

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

onloadeddata 事件的基本用法

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

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

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>onloadeddata 事件示例</title>
</head>
<body>
    <img src="example.jpg" id="myImg">
    
    <script>
        const img = document.getElementById('myImg');
        
        img.addEventListener('loadeddata', () => {
            console.log('图片加载完成！');
            // 在这里可以执行一些操作，比如显示图片等
        });
    </script>
</body>
</html>

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

onloadeddata 事件的实际应用

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

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

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>图片懒加载示例</title>
    <style>
        .lazy-img {
            width: 200px;
            height: 200px;
            background: #f0f0f0;
        }
    </style>
</head>
<body>
    <div class="lazy-img" data-src="example.jpg"></div>
    
    <script>
        const lazyImg = document.querySelector('.lazy-img');
        
        lazyImg.addEventListener('loadeddata', () => {
            const src = lazyImg.getAttribute('data-src');
            lazyImg.style.backgroundImage = `url(${src})`;
        });
        
        lazyImg.style.backgroundImage = `url(${lazyImg.getAttribute('data-src')})`;
    </script>
</body>
</html>

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