今天我們繼續講一些在前端開發中常遇到的問題，並分享一些實用的優化技巧。這次的重點是圖片的加載與錯誤處理，與其他前端問題等。讓我們來看看如何利用 Angular 的功能和 CSS 技巧，讓你開發的網站更流暢、更美觀！
文章大綱：
現代網站上大量的圖片會拖慢頁面的加載速度，但透過 Lazy Loading（延遲加載），我們可以在用戶滾動到圖片時才載入它們，進一步提升網站的效能。此外，處理圖片讀取錯誤，讓用戶在圖片載入失敗時看到替代圖片，也是保持網站美觀的重要一環。
使用 [lazyLoad] 屬性可以有效地控制圖片的加載時機，讓圖片只有當使用者滾動到該圖片的時候才會開始載入。
<img [lazyLoad]="imageUrl" alt="商品圖片" />
[lazyLoad] 才會開始加載 imageUrl，這樣可以避免一次性載入所有圖片，有效提升頁面載入速度。除了 lazy loading，我們還可以使用 [errorImage] 屬性來設定一張圖片加載失敗時顯示的替代圖片，避免出現難看的「破圖」符號。
[errorImage]：<img [lazyLoad]="imageUrl" [errorImage]="'assets/error-placeholder.jpg'" alt="商品圖片" />
error-placeholder.jpg 會自動顯示，保持網站美觀，不至於出現壞掉的圖像標示。使用 [defaultImage] 屬性，你可以設定圖片在尚未加載前顯示的預設圖片，這可以是 Loading 圖片或任何提示用戶等待的圖片。
[defaultImage]：<img [lazyLoad]="imageUrl" [defaultImage]="'assets/loading.gif'" alt="商品圖片" />
loading.gif 會顯示在圖片區域，提示用戶圖片正在加載，提升使用者體驗。有時候我們的圖片會放在一個自訂滾動區域內，這時可以使用 [scrollContainer] 屬性來指定滾動容器，讓圖片在該容器內滾動時才加載。
[scrollContainer]：<div #scrollArea style="overflow-y: scroll; height: 400px;">
<img [lazyLoad]="imageUrl" [scrollContainer]="scrollArea" alt="商品圖片" />
</div>
scrollArea 內滾動時，圖片才會開始加載，這樣的設計能夠節省更多資源。在圖片載入之前，我們最好先設置圖片的長寬，這樣可以避免因圖片大小未知導致的排版錯亂。另外，使用 Loading 圖標可以讓用戶知道圖片正在載入中。
<img [lazyLoad]="imageUrl" width="400" height="300" [defaultImage]="'assets/loading.gif'" [errorImage]="'assets/error-placeholder.jpg'" alt="商品圖片" />
width 和 height，確保圖片區域在加載期間不會變動，且在載入前顯示 loading.gif，保持版面整齊。使用 object-fit 屬性，我們可以讓圖片根據容器大小自適應，並保持原有的比例，確保不會因為不同螢幕大小而被裁切。
<img [lazyLoad]="imageUrl" [errorImage]="'assets/error-placeholder.jpg'" alt="商品圖片" style="width: 100%; height: auto; object-fit: contain;" />
object-fit: contain; 讓圖片根據容器大小自動縮放，保持圖片完整性。當我們談到網站美感時，字體設計絕對是一個關鍵元素。透過正確的字體排版，可以讓網站的整體視覺效果更加和諧和專業。在 Angular Material 中，我們可以利用它內建的 Typography API 來輕鬆自訂和應用字體樣式。以下是簡單的操作步驟，教你如何在 Angular 專案中進行字體的設計與最佳化。
Angular Material Typography 官方文件
在開始使用 Angular Material 提供的字體樣式之前，我們需要先在專案中載入字體。以 Roboto 字體為例，我們可以使用 Google Fonts 來引入。將以下程式碼加到專案的 index.html 的 <head> 標籤中：
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
這樣一來，每當網站載入時，Roboto 字體就會自動引入並可用於字體設定。
接下來，我們可以利用 Angular Material 的 define-typography-config 來自訂不同的字體樣式，這些樣式會應用到網站的標題、內文等位置。通常，我們會將這些字體設定放在專案的 styles.scss 中。
以下是設定範例，放置於 styles.scss 檔案：
@use '@angular/material' as mat;
$my-typography: mat.define-typography-config(
$font-family: 'Roboto, sans-serif', // 指定主要使用的字體
$headline-1: mat.typography-level(32px, 40px, 500), // 標題1的大小、行高、字重
$body-1: mat.typography-level(16px, 24px, 400) // 內文的大小、行高、字重
);
@include mat.typography-hierarchy($my-typography); // 套用自訂字體樣式
這段程式碼會幫你自動設定好網站的字體樣式，並應用到不同類型的文字，像是標題和內文。這樣就可以輕鬆確保整個網站的字體設計保持一致。
定義完字體之後，你只需要在你的專案中應用這些樣式。例如，想讓段落應用到 body-1 樣式，你可以這樣寫：
<p class="mat-body-1">這是內文的範例，應用了自訂的字體樣式。</p>
或者，如果你在 <h1> 標籤中使用自訂的 headline-1 樣式：
<h1 class="mat-headline-1">這是自訂標題樣式的範例。</h1>
這樣一來，網站的字體排版會根據你在 styles.scss 中的設定自動應用。
透過 Angular Material 的 Typography API，我們可以輕鬆自訂和應用字體設定，讓網站的字體排版更加專業一致。不論是標題、內文或是細節文字，都可以根據需求進行最佳化設定，提升網站的視覺效果。
當畫面中的多個元素重疊時，我們可以使用 z-index 來控制它們的層次關係。z-index 是一個 CSS 屬性，數字越大，元素越靠前。
.header {
z-index: 10;
}
.banner {
z-index: 1;
}
z-index 值越大，元素會顯示在更靠前的位置，適合用來調整畫面中的層次關係。在顯示過長的文字時，使用省略號來截斷文本是一個實用的設計技巧。這不僅讓畫面更整齊，也提高了可讀性。
.title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.description {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
今天我們討論了圖片 lazy loading、字體最佳化等多個前端優化技巧。這些技巧不僅能提升網站的效能，還能讓你打造更美觀、實用的前端介面。持續學習與應用這些技術，能讓你的網站不斷進步，也讓使用者有更好的體驗！
加油！期待下次我們一起探索更多的前端技巧，讓每個專案都比上一次更完美！
iThome鐵人賽
看影片追技術