<!DOCTYPE html>
<html>
<head>
    <title>加载图片并显示加载动画</title>
    <style>
        /* 隐藏正常图片 */
        .loaded-image {
            display: none;
        }
    </style>
</head>
<body>
    <!-- 显示加载动画的图像 -->
    <img src="https://xn--xu0a.cn/ico/loading.webp" class="loading-image">

    <!-- 加载完成后显示正确的图像 -->
    <img src="https://xn--xu0a.cn/api/dn" class="loaded-image" onload="showImage(this)">

    <script>
        function showImage(image) {
            // 隐藏加载动画图像
            var loadingImg = document.querySelector(".loading-image");
            loadingImg.style.display = "none";

            // 显示加载完成的图像
            image.style.display = "block";
        }
    </script>
</body>
</html>