js 怎么判断图片加载完成

判断图片加载完成的方法有多种，主要有以下几种：使用 onload 事件监听、使用 complete 属性、使用 Promise 和 async/await 语法。 其中，使用 onload 事件监听 是最常用和直观的方法。

使用 onload 事件监听：这是一种直接的方法，通过监听图片的 onload 事件，当图片加载完成时会触发这个事件。以下是详细描述：

当你需要在 JavaScript 中判断图片是否加载完成时，最常见的方法就是使用 onload 事件监听。你只需为图片元素添加一个 onload 事件处理程序，当图片成功加载后，该事件处理程序就会被调用。这种方法不仅简单，而且适用于各种浏览器，确保你的代码在不同的环境下都能可靠运行。

let img = new Image();
img.onload = function() {
    console.log('Image loaded successfully!');
};
img.src = 'path/to/your/image.jpg';

在这个例子中，我们首先创建了一个新的 Image 对象，然后为其 onload 属性分配了一个回调函数。当图片加载完成时，这个回调函数会被调用，并输出“Image loaded successfully!”的消息。这种方法不仅适用于动态创建的图片，也可以用于现有的 img 元素，只需确保在设置 src 属性之前添加 onload 事件处理程序。

一、使用 `complete` 属性

描述

complete 属性是一个布尔值，表示图片是否已经加载完成。如果图片已经加载完成，complete 属性的值为 true，否则为 false。

示例

let img = new Image();
img.src = 'path/to/your/image.jpg';
if (img.complete) {
    console.log('Image loaded successfully!');
} else {
    img.onload = function() {
        console.log('Image loaded successfully!');
    };
}

在这个示例中，我们首先检查 img.complete 属性，如果为 true，则表示图片已经加载完成；否则，我们为图片添加一个 onload 事件处理程序，以便在图片加载完成时输出消息。

二、使用 `Promise` 和 `async/await` 语法

描述

使用 Promise 和 async/await 语法可以使代码更简洁、更现代化。这种方法特别适用于需要处理多个异步操作的场景。

示例

function loadImage(url) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = () => resolve(img);
        img.onerror = () => reject(new Error('Failed to load image'));
        img.src = url;
    });
}
async function main() {
    try {
        const img = await loadImage('path/to/your/image.jpg');
        console.log('Image loaded successfully!');
    } catch (error) {
        console.error(error);
    }
}
main();

在这个示例中，我们首先定义了一个 loadImage 函数，该函数返回一个 Promise。在 Promise 的执行函数中，我们为图片添加了 onload 和 onerror 事件处理程序，分别在图片加载成功和失败时调用 resolve 和 reject。然后，我们在 main 函数中使用 await 关键字等待图片加载完成，并在图片加载成功时输出消息。

三、使用现有的 `img` 元素

描述

如果你需要判断一个已经存在于 DOM 中的 img 元素是否加载完成，可以直接访问该元素的 complete 属性，或使用 onload 事件监听。

示例

<img id="myImage" src="path/to/your/image.jpg" alt="My Image">
<script>
    const img = document.getElementById('myImage');
    if (img.complete) {
        console.log('Image loaded successfully!');
    } else {
        img.onload = function() {
            console.log('Image loaded successfully!');
        };
    }
</script>

在这个示例中，我们首先通过 document.getElementById 获取已经存在的 img 元素，然后检查其 complete 属性。如果图片已经加载完成，则直接输出消息；否则，为图片添加 onload 事件处理程序。

四、检测所有图片是否加载完成

描述

在某些情况下，你可能需要检测页面上所有图片是否加载完成。这可以通过遍历所有 img 元素，并为每个元素添加 onload 事件处理程序来实现。

示例

<img src="path/to/your/image1.jpg" alt="Image 1">
<img src="path/to/your/image2.jpg" alt="Image 2">
<img src="path/to/your/image3.jpg" alt="Image 3">
<script>
    const images = document.querySelectorAll('img');
    let loadedCount = 0;
    images.forEach(img => {
        if (img.complete) {
            loadedCount++;
            if (loadedCount === images.length) {
                console.log('All images loaded successfully!');
            }
        } else {
            img.onload = function() {
                loadedCount++;
                if (loadedCount === images.length) {
                    console.log('All images loaded successfully!');
                }
            };
        }
    });
</script>

在这个示例中，我们首先通过 document.querySelectorAll 获取页面上的所有 img 元素，然后遍历每个元素，检查其 complete 属性。如果图片已经加载完成，则增加计数器 loadedCount 的值；否则，为图片添加 onload 事件处理程序。当计数器 loadedCount 的值等于图片总数时，表示所有图片均已加载完成，并输出消息。

五、使用 Intersection Observer API 监测图片加载情况

描述

Intersection Observer API 提供了一种异步监测元素可见性变化的方法，可以用于监测图片是否加载完成。这种方法特别适用于懒加载图片。

示例

<img class="lazy" data-src="path/to/your/image1.jpg" alt="Image 1">
<img class="lazy" data-src="path/to/your/image2.jpg" alt="Image 2">
<img class="lazy" data-src="path/to/your/image3.jpg" alt="Image 3">
<script>
    const images = document.querySelectorAll('.lazy');
    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                img.src = img.dataset.src;
                img.onload = () => console.log('Image loaded successfully!');
                observer.unobserve(img);
            }
        });
    });
    images.forEach(img => observer.observe(img));
</script>

在这个示例中，我们首先通过 document.querySelectorAll 获取所有带有 lazy 类的 img 元素，然后创建一个 IntersectionObserver 实例。在回调函数中，当图片进入视口时，设置其 src 属性，并为其添加 onload 事件处理程序以监测图片加载完成。最后，为每个 img 元素调用 observer.observe 方法。

六、使用框架和库

描述

现代前端框架和库如 React、Vue 和 Angular 提供了处理图片加载的便捷方法。通过这些框架和库，你可以更轻松地管理图片加载状态。

示例（React）

import React, { useState, useEffect } from 'react';
function ImageComponent({ src, alt }) {
    const [loaded, setLoaded] = useState(false);
    useEffect(() => {
        const img = new Image();
        img.onload = () => setLoaded(true);
        img.src = src;
    }, [src]);
    return (
        <div>
            {loaded ? <img src={src} alt={alt} /> : <p>Loading...</p>}
        </div>
    );
}
export default ImageComponent;

在这个示例中，我们创建了一个 React 组件 ImageComponent。在 useEffect 钩子中，我们创建一个新的 Image 对象，并为其 onload 事件添加回调函数。当图片加载完成时，更新组件的状态以显示图片。

七、优化图片加载性能

描述

为了提升用户体验，可以采用一些优化图片加载性能的方法，如使用 CDN、懒加载、压缩图片、使用适当的图片格式等。

示例

<img class="lazy" data-src="path/to/your/image1.jpg" alt="Image 1">
<img class="lazy" data-src="path/to/your/image2.jpg" alt="Image 2">
<img class="lazy" data-src="path/to/your/image3.jpg" alt="Image 3">
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const images = document.querySelectorAll('.lazy');
        const observer = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const img = entry.target;
                    img.src = img.dataset.src;
                    img.onload = () => console.log('Image loaded successfully!');
                    observer.unobserve(img);
                }
            });
        });
        images.forEach(img => observer.observe(img));
    });
</script>

在这个示例中，我们使用 Intersection Observer API 实现图片的懒加载。通过这种方式，可以显著提升页面初次加载的性能，并减少用户等待时间。

八、结论

判断图片是否加载完成在前端开发中非常常见和重要。无论是通过 onload 事件监听、complete 属性、Promise 和 async/await 语法，还是使用现代前端框架和库，都可以实现这一目的。根据具体场景选择合适的方法，并结合图片加载性能优化策略，可以显著提升用户体验。

此外，在项目团队管理中，使用合适的项目管理系统也能提升开发效率。如果你的团队需要一个强大的研发项目管理工具，可以考虑使用 研发项目管理系统PingCode。如果你需要一个通用的项目协作软件，可以选择 Worktile。这两款工具都能帮助你更好地管理项目，提高团队协作效率。