占位图片（Placeholder Image）

一、引言

在网页设计和开发中，占位图片（Placeholder Image）是一种常见的技术手段，用于在用户上传图片之前或者图片加载失败时，展示一个临时替代的图片，以提高用户体验。本文将详细介绍占位图片的实现原理和实践应用，并通过实例给出不同场景下的解决方案。

占位图片生成器 | 一个覆盖广泛主题工具的高效在线平台(amd794.com)

https://amd794.com/placeholder

二、占位图片实现原理

CSS实现

通过CSS的::before或::after伪元素，可以在元素内部插入占位图片。以下是一个简单的示例：

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>占位图片实现</title>
    <style>
        .placeholder {
            width: 200px;
            height: 200px;
            background-image: url('https://amd794.com/upload/images/cmder/200_X_200_L8fk0kE.png');
            background-size: cover;
            background-position: center;
        }

        .placeholder::before {
            content: "";
            display: block;
            width: 100%;
            height: 100%;
            background-image: url('https://amd794.com/upload/images/cmder/200_X_200_L8fk0kE.png');
            background-size: cover;
            background-position: center;
        }
    </style>
</head>
<body>
    <div class="placeholder"></div>
</body>
</html>

JavaScript实现

通过JavaScript，可以在图片加载失败时，切换到占位图片。以下是一个简单的示例：

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>占位图片实现</title>
</head>
<body>
    <img id="main-img" src="https://amd794.com/upload/images/cmder/200_X_200_L8fk0kE.png" alt="占位图片">

    <script>
        const mainImg = document.getElementById('main-img');

        mainImg.addEventListener('error', () => {
            mainImg.onerror = null;
            mainImg.src = 'https://amd794.com/upload/images/cmder/200_X_200_L8fk0kE.png';
        });

        mainImg.addEventListener('load', () => {
            mainImg.onload = null;
        });
    </script>
</body>
</html>

三、占位图片实践应用