为何除product_1和product_2外其余图片均能平滑加载？

安全阿岳

2026-7-2

图片加载异常问题排查

除product_1和product_2外，其余图片均可平滑加载。这两张图片仅能从上到下逐块加载，而三张产品图片的文件大小几乎一致，只有product_3加载快速流畅。此前所有图片都存在加载问题，对所有图片压缩后，仅这两张图片仍有该问题。另外，已将部分CSS代码移至HTML头部（曾看到资料称独立CSS文件中的critical CSS可能引发此类错误），网站整体加载速度有所提升，但问题仍未解决。

HTML代码

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="scripts.js"></script>
    <title>Notide</title>
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Caveat">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
    <style>
        body {
            margin: 0;
        }

        .wrapper {
            height: 100vh;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            background-image: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.9) 100%),             url(img/background_2_2.jpg);
            background-size: 100%;
            background-repeat: no-repeat;
        }

        .button {
            font-size: 25px;
            cursor: pointer;
            padding: 10px;
            background-color: rgba(0,0,0,0);
            border: solid;
            color: #fff;
            font-family: 'Caveat';
            padding-left: 5px;
            text-shadow: 2px 2px 4px rgba(41,110,107,1);
            box-shadow: 2px 2px 4px rgba(41,110,107,1);
        }

        .menu nav img {
            height: 150px; 
            width: 120px;
        }

        .head-sentence h1 {
            font-family: 'Caveat';
            font-size: 100px;
            border-radius: 25px;
            color: #fff;
            border: 5px;
            border-color: #fff;
            border-style: solid;
            padding-left: 10px;
            padding-right: 20px;
            text-shadow: rgba(41,110,107,255);
            text-shadow: 2px 2px 4px rgba(41,110,107,1);
            box-shadow: 2px 2px 4px rgba(41,110,107,1);
        }

        .show-products_head {
            text-align: center;
            color: #fff;
            border: 5px #fff solid;
            padding: 10px 20px;
            border-radius: 15px;
            text-shadow: rgba(41,110,107,255);
            text-shadow: 4px 4px 8px rgba(41,110,107,1);
            box-shadow: 4px 4px 8px rgba(41,110,107,1);
        }

        .show-products {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            height: 100vh;
            background-color: rgba(0,0,0,0.9);
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="menu">
            <nav>
                <img src="img/NOTIDE.png" alt="Logo" onclick="homeButton()">
                <button class="button" onclick="homeButton()">Home</button>
                <button class="button" onclick="shopButton()">Shop</button>
                <button class="button" onclick="contactButton()">Kontakt</button>
            </nav>
        </div>
        <div class="head-sentence">
            <h1>
                Welcome to NoTide
            </h1>
        </div>
        <div class="scrollDown-Button-Boss">
            <button class="scrollDown-Button" onclick="scrollToProducts()">
                <i class="bi bi-arrow-down"></i>
                Products
            </button>
        </div>
    </div>
    <div class="show-products" id="Show-Products">

        <div class="show-products_head_position">
            <h1 class="show-products_head">Our Products</h1>
        </div>

        <div class="product_1">
            <div class="product_1_position">
                <img src="img/Product_1.png" class="product_1_img">
            </div>
        </div>
        <div class="product_1_button-Boss">
            <button class="product_1_button" onclick="productLink(this)">
                To the product
                <i class="bi bi-arrow-right"></i>
            </button>
        </div>

        <div class="product_2">
            <div class="product_2_position">
                <img src="img/Product_2.png" class="product_2_img">
            </div>
        </div>
        <div class="product_2_button-Boss">
            <button class="product_2_button" onclick="productLink(this)">
                To the product
                <i class="bi bi-arrow-right"></i>
            </button>
        </div>

        <div class="product_3">
            <div class="product_3_position">
                <img src="img/Product_3.jpg" class="product_3_img">
            </div>
        </div>
        <div class="product_3_button-Boss">
            <button class="product_3_button" onclick="productLink(this)">
                To the product
                <i class="bi bi-arrow-right"></i>
            </button>
        </div>
    </div>
    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
</body>
</html>

CSS代码

.menu {
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
}
.menu nav {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    cursor: pointer;
    margin-top: 20px;
}

.head-sentence {
    grid-column: 2 / span 2;
    grid-row: 2 / span 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}


.show-products_head_position {
    grid-column: 2; 
    grid-row: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.product_1 {
    grid-column: 2;
    grid-row: 2;
}

.product_2 {
    grid-column: 3;
    grid-row: 2;
}

.product_3 {
    grid-column: 1;
    grid-row: 2;
}

.product_1_position, .product_2_position, .product_3_position{
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.product_1_img, .product_2_img, .product_3_img{
    max-width: 45%;
}

.product_1_button-Boss {
    grid-column: 2;
    grid-row: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product_2_button-Boss {
    grid-column: 3;
    grid-row: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product_3_button-Boss {
    grid-column: 1;
    grid-row: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product_1_button, .product_2_button, .product_3_button {
    font-size: 20px;
    cursor: pointer;
    padding: 10px;
    background-color: rgba(0,0,0,0);
    border: solid;
    color: #fff;
    font-family: 'Caveat';
    padding-left: 5px;
    text-shadow: 2px 2px 4px rgba(41,110,107,1);
    box-shadow: 2px 2px 4px rgba(41,110,107,1);
    backdrop-filter: blur(2px);
}

.scrollDown-Button {
    font-size: 40px;
    cursor: pointer;
    padding: 10px;
    background-color: rgba(0,0,0,0);
    border: solid;
    color: #fff;
    font-family: 'Caveat';
    padding-left: 5px;
    text-shadow: 2px 2px 4px rgba(41,110,107,1);
    box-shadow: 2px 2px 4px rgba(41,110,107,1);
    backdrop-filter: blur(2px);
}

.scrollDown-Button-Boss {
    grid-column: 2 / span 2;
    grid-row: 3 / span 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

问题演示

图片加载异常演示

内容的提问来源于stack exchange，提问作者Sycro

为何除product_1和product_2外其余图片均能平滑加载？

HTML代码 #

CSS代码 #

问题演示 #

HTML代码

CSS代码

问题演示