如何隐藏未加载的图片(<img>标签)？

隐藏未加载的图片可以通过多种方法实现，以下是几种常见的方法：

方法一：使用CSS

你可以使用CSS来隐藏未加载的图片。一个常见的方法是使用伪类:empty和:not(:empty)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hide Unloaded Images</title>
    <style>
        img {
            width: 200px;
            height: 200px;
            background-color: #f0f0f0; /* 设置一个占位背景色 */
        }
        img:not([src]):not([srcset]) {
            display: none; /* 隐藏没有src属性的图片 */
        }
    </style>
</head>
<body>
    <img data-src="image.jpg" alt="Example Image">
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const images = document.querySelectorAll('img[data-src]');
            images.forEach(img => {
                img.src = img.dataset.src;
            });
        });
    </script>
</body>
</html>

方法二：使用JavaScript

你可以使用JavaScript来动态设置图片的src属性，并在图片加载完成前隐藏图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hide Unloaded Images</title>
    <style>
        img {
            width: 200px;
            height: 200px;
            background-color: #f0f0f0; /* 设置一个占位背景色 */
            visibility: hidden; /* 隐藏图片 */
        }
        img.loaded {
            visibility: visible; /* 加载完成后显示图片 */
        }
    </style>
</head>
<body>
    <img data-src="image.jpg" alt="Example Image">
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const images = document.querySelectorAll('img[data-src]');
            images.forEach(img => {
                img.src = img.dataset.src;
                img.onload = () => {
                    img.classList.add('loaded');
                };
            });
        });
    </script>
</body>
</html>

方法三：使用占位符

你可以使用一个占位符来代替未加载的图片，当图片加载完成后替换掉占位符。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hide Unloaded Images</title>
    <style>
        .image-container {
            width: 200px;
            height: 200px;
            background-color: #f0f0f0; /* 设置一个占位背景色 */
            position: relative;
        }
        .placeholder {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #f0f0f0;
        }
        img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 0.3s;
        }
        img.loaded {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="image-container">
        <div class="placeholder"></div>
        <img data-src="image.jpg" alt="Example Image">
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const images = document.querySelectorAll('img[data-src]');
            images.forEach(img => {
                img.src = img.dataset.src;
                img.onload = () => {
                    img.classList.add('loaded');
                };
            });
        });
    </script>
</body>
</html>