在網頁設計中，圖片資源的使用是不可避免的。但是如果圖片較大，將會導致頁面加載速度變慢，影響用戶體驗。這時候，就需要使用占位圖片來預留加載圖片的位置。而 CSS3 提供了一種很方便的實現方式 - 加載占位圖。 在 CSS3 中，可以通過 background-image 屬性來設置加載占位圖。下面是一段示例代碼，展示了如何使用 CSS3 的加載占位圖效果，代碼中使用 pre 標簽來展示代碼內容。

/* 設置占位圖 */
.your-image-class {
background-image: url('your-placeholder-image.jpg');
background-repeat: no-repeat;
background-size: cover;
}
/* 加載圖片 */
.your-image-class.loaded {
background-image: url('your-image.jpg');
}

上述代碼中，我們定義了一個類名為 your-image-class ，并為其設置了一個加載占位圖。然后在頁面加載完畢后，通過添加 loaded 類名來加載圖片，此時占位圖自動被替換成真正的圖片資源，實現了預加載圖片的效果。 此外，除了使用 background-image 屬性來設置加載占位圖，我們還可以使用偽元素，如下所示：

/* 使用偽元素 */
.your-image-class:before {
content: " ";
display: block;
width: 100%;
height: 0;
padding-bottom: 67%; /* 設置高度占比 */
background-image: url('your-placeholder-image.jpg');
background-repeat: no-repeat;
background-size: cover;
}
/* 加載圖片 */
.your-image-class.loaded:before {
background-image: url('your-image.jpg');
}

上述代碼中，我們通過設置偽元素的寬度和設置它的高度占比來實現加載占位圖的效果。同樣地，在頁面加載完畢后通過添加 loaded 類名來替換占位圖為圖片資源。 總的來說，CSS3 加載占位圖可以在用戶體驗和網頁性能方面提供不小的幫助。不同的實現方式各有特點，可以根據不同的需求進行選擇。希望這篇文章能對您有所幫助！