跳至主要內容

文件

圖片

使用背景圖片，搭配延遲載入、響應式圖片和不同的圖片來源

圖片元件模擬瀏覽器 <img> 元素的特性，但用於背景圖片。這包括 loading="lazy"、srcset 和 sizes 屬性，以及 <picture> 元素的 <source> 元素。這透過僅在背景圖片進入可視範圍時才載入它們，來加速頁面載入時間並減少流量。針對不同的裝置寬度和高解析度（Retina）顯示器提供最佳化的背景圖片。

用法

要套用此元件，請將 uk-img 和包含背景圖片路徑的 data-src 屬性新增至 div 或任何其他元素。預設情況下，背景圖片將在捲動時進入可視範圍時延遲載入。

<div data-src="" uk-img>…</div>

背景圖片

<div class="uk-height-medium uk-flex uk-flex-center uk-flex-middle uk-background-cover uk-light" data-src="https://images.unsplash.com/photo-1490822180406-880c226c150b?fit=crop&w=650&h=433&q=80" uk-img>
  <h1>Background Image</h1>
</div>

急切載入

要避免第一個可見視窗的背景圖片延遲載入，但仍使用此元件的其他功能，請將 loading="eager" 參數新增至 uk-img 屬性。

<div data-src="" uk-img="loading: eager">…</div>

背景圖片

<div class="uk-height-medium uk-flex uk-flex-center uk-flex-middle uk-background-cover uk-light" data-src="https://images.unsplash.com/photo-1495321308589-43affb814eee?fit=crop&w=650&h=433&q=80" uk-img="loading: eager">
  <h1>Background Image</h1>
</div>

Srcset

若要為背景圖片使用 srcset 功能，只需新增 data-srcset 屬性。您可以選擇新增 sizes 屬性，但不要使用前綴。

<div data-src="" data-srcset="" sizes="" uk-img>…</div>

背景圖片

<div class="uk-height-medium uk-flex uk-flex-center uk-flex-middle uk-background-cover"
     data-src="https://images.unsplash.com/photo-1491895200222-0fc4a4c35e18?fit=crop&w=650&h=433&q=80"
     data-srcset="https://images.unsplash.com/photo-1491895200222-0fc4a4c35e18?fit=crop&w=650&h=433&q=80 650w,
                  https://images.unsplash.com/photo-1491895200222-0fc4a4c35e18?fit=crop&w=1300&h=866&q=80 1300w"
     sizes="(min-width: 650px) 650px, 100vw" uk-img>
    <h1>Background Image</h1>
</div>

圖片來源

若要像包含 <source> 元素的 <picture> 元素一樣使用不同的圖片來源，請新增具有 srcset、media 和 type 參數的 sources 屬性。

<div sources="srcset: ____; media: ____" data-src="" uk-img>…</div>

<div sources="srcset: ____; type: ____" data-src="" uk-img>…</div>

背景圖片

<div class="uk-height-medium uk-flex uk-flex-center uk-flex-middle uk-background-cover uk-light"
     sources="srcset: https://images.unsplash.com/photo-1487837647815-bbc1f30cd0d2?fit=crop&w=650&h=433&q=80; media: (min-width: 1200px)"
     data-src="https://images.unsplash.com/photo-1546349851-64285be8e9fa?fit=crop&w=650&h=433&q=80"
     uk-img>
    <h1>Background Image</h1>
</div>

您可以為每個來源提供多個圖片來源，以及多個解析度，使用 srcset。

<div sources="srcset: ____; media: ____" data-src="" data-srcset="" sizes="" uk-img>…</div>

背景圖片

<div class="uk-height-medium uk-flex uk-flex-center uk-flex-middle uk-background-cover uk-light"
     sources="srcset: https://images.unsplash.com/photo-1464621922360-27f3bf0eca75?fit=crop&w=650&h=433&q=80 650w,
                      https://images.unsplash.com/photo-1464621922360-27f3bf0eca75?fit=crop&w=1300&h=866&q=80 1300w;
              media: (min-width: 1200px)"
     data-src="https://images.unsplash.com/photo-1472803828399-39d4ac53c6e5?fit=crop&w=650&h=433&q=80"
     data-srcset="https://images.unsplash.com/photo-1472803828399-39d4ac53c6e5?fit=crop&w=650&h=433&q=80 650w,
                  https://images.unsplash.com/photo-1472803828399-39d4ac53c6e5?fit=crop&w=1300&h=866&q=80 1300w"
     sizes="(min-width: 650px) 650px, 100vw" uk-img>
    <h1>Background Image</h1>
</div>

可以使用 JSON 語法定義多個來源。

[
    {
        "srcset": "____",
        "media": "____"
    },
    {
        "srcset": "____",
        "type": "____"
    }
]

JSON 需要進行 HTML 編碼。

<div sources="[{&quot;type&quot;: &quot;____&quot;,
                &quot;srcset&quot;: &quot;____&quot;
               },
               {&quot;type&quot;: &quot;____&quot;,
                &quot;srcset&quot;: &quot;____&quot;
               }]"
     data-src="" uk-img>…</div>

此範例提供了替代的圖片格式，例如 WebP 和 AVIF。

背景圖片

<div class="uk-height-medium uk-flex uk-flex-center uk-flex-middle uk-background-cover"
     sources="[{&quot;srcset&quot;: &quot;images/image-type.avif&quot;,
                &quot;type&quot;: &quot;image\/avif&quot;
                },
                {&quot;srcset&quot;: &quot;images/image-type.webp&quot;,
                &quot;type&quot;: &quot;image\/webp&quot;
                }]"
        data-src="images/image-type.jpg"
        uk-img>
    <h1>Background Image</h1>
</div>

元件選項

任何這些選項都可以套用至元件屬性。用分號分隔多個選項。瞭解更多

選項 值 預設值 描述
dataSrc 字串 圖片的 src 屬性。
sources 字串 圖片的來源。此選項僅用於背景圖片。來源屬性以 key: value; 格式傳遞，用於單一來源。若有多個來源，則使用 JSON 格式。
loading 字串 lazy 啟用延遲/急切載入。將第一個可見視窗內的圖片設定為 eager。
margin 字串 50% 在計算與圖片的交集之前，將邊距新增至視窗的邊界框。值必須以 px 或 % 為單位。
target 字串 false 目標列表，其邊界框將用於計算與圖片的交集。預設為圖片本身。

dataSrc 是主要選項，如果它是屬性值中的唯一選項，則可以省略其鍵。

JavaScript

深入瞭解JavaScript 元件。

初始化

UIkit.img(element, options);

注意 圖片元件會在 Session Storage 中記錄已載入的圖片。這就是它如何嘗試判斷圖片是否已被快取。快取的圖片會立即載入，而不會使用延遲載入機制來防止任何呈現閃爍。在測試圖片元件之前，請務必從瀏覽器的 Session Storage 中清除這些記錄。