Untitled

<!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #000;
      }

      .image-container {
        width: 100vw; /* Full chiều rộng màn hình */
        position: relative;
        overflow: hidden;
        min-height: 300px; /* Giữ kích thước khi ảnh chưa tải */
      }

      .shimmer {
        width: 100%;
        height: 100%; /* Bằng với image-container để không có khoảng đen */
        background: linear-gradient(90deg, #333 25%, #444 50%, #333 75%);
        background-size: 200% 100%;
        animation: shimmer 1.5s infinite;
        position: absolute;
        top: 0;
        left: 0;
      }

      @keyframes shimmer {
        0% { background-position: -200% 0; }
        100% { background-position: 200% 0; }
      }

      img {
        width: 100%;
        height: auto;
        display: block;
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
      }
    </style>
  </head>
    <body>
      $imagesHtml
      <script>
      document.addEventListener("DOMContentLoaded", function () {
        document.querySelectorAll("img").forEach(img => {
          img.onload = function () {
            img.style.opacity = 1;
            img.previousElementSibling.style.display = "none";
          };
        });
      });
    </script>
    </body>
    </html>
Editor is loading...