guoziyun
/
artsite


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
							<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片占位符示例</title>
  <style>
    /* 容器样式 - 关键：通过JS动态设置尺寸 */
    .image-container {
      position: relative;
      max-width: 90%;
      margin: 20px auto;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      overflow: hidden;
    }

    /* 占位符样式 - 与图片尺寸完全一致 */
    .image-placeholder {
      width: 100%;
      height: 100%;
      background-color: #f5f5f5;
      /* 浅灰色背景 */
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* 加载动画 - 旋转圆圈 */
    .loading-spinner {
      width: 40px;
      height: 40px;
      border: 4px solid #e0e0e0;
      border-top: 4px solid #ff6b6b;
      /* 主题色 */
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    /* 图片样式 - 初始隐藏，加载后显示 */
    .target-image {
      width: 100%;
      height: 100%;
      object-fit: contain;
      opacity: 0;
      /* 初始透明 */
      transition: opacity 0.3s ease;
      /* 淡入效果 */
    }

    /* 图片加载完成后显示 */
    .target-image.loaded {
      opacity: 1;
    }
  </style>
</head>

<body>
  <!-- 图片容器：包含占位符和图片 -->
  <div class="image-container">
    <div class="image-placeholder" id="placeholder">
      <div class="loading-spinner"></div>
    </div>
    <img id="targetImg" class="target-image"
      src="http://color.jccytech.cn/thumbs/coloring-page/done/480/614d6e7987ca20188d3cc089.webp" alt="示例图片">
  </div>

  <script>
    // 目标图片URL
    const imageUrl = "http://color.jccytech.cn/thumbs/coloring-page/done/480/614d6e7987ca20188d3cc089.webp";
    const container = document.querySelector('.image-container');
    const placeholder = document.getElementById('placeholder');
    const targetImg = document.getElementById('targetImg');

    // 步骤1：预加载图片获取尺寸
    function getImageDimensions(url) {
      return new Promise((resolve, reject) => {
        const tempImg = new Image();
        tempImg.src = url;
        // 图片元信息加载完成（无需加载完整内容）
        tempImg.onload = () => {
          resolve({
            width: tempImg.naturalWidth,
            height: tempImg.naturalHeight
          });
        };
        tempImg.onerror = () => reject(new Error("图片尺寸获取失败"));
      });
    }

    // 步骤2：设置占位容器尺寸（与图片一致）
    async function setupPlaceholder() {
      try {
        const { width, height } = await getImageDimensions(imageUrl);

        // 设置容器尺寸（与图片完全一致）
        container.style.width = `${width}px`;
        container.style.height = `${height}px`;

        // 对于响应式设计，可改为百分比宽度（根据实际需求）
        // container.style.width = '100%';
        // container.style.maxWidth = `${width}px`;
        // container.style.height = 'auto';
        // container.style.aspectRatio = `${width}/${height}`; // 宽高比

      } catch (error) {
        console.error(error);
        // 失败时使用默认尺寸
        container.style.width = '800px';
        container.style.height = '600px';
      }
    }

    // 步骤3：图片加载完成后隐藏占位符
    targetImg.onload = function () {
      targetImg.classList.add('loaded'); // 图片淡入
      placeholder.style.display = 'none'; // 隐藏占位符
    };

    // 初始化
    setupPlaceholder();
  </script>
</body>

</html>