Loadr，一種在 HTML 中無縫加載大圖像的高效解決方案-js教程-PHP中文網

Loadr，一種在 HTML 中無縫加載大圖像的高效解決方案

PHPz

發布： 2024-09-03 11:39:02

原創

913 人瀏覽過

Loadr, an efficient solution for seamlessly loading large images in HTML

它是如何運作的：

它首先從 img src 加載低解析度圖像，然後在 hr-src atrbute 中載入高解析度圖像，一旦加載，就會用高解析度圖像取代低解析度圖像。

查看倉庫，如果有星星就太棒了

示範

安裝

CDN

使用 CDN 匯入 Loadr。

index.html

<script src="https://cdn.jsdelivr.net/npm/open-loadr/loadr.min.js"></script>

登入後複製

？具體版本

<script src="https://cdn.jsdelivr.net/npm/open-loadr@latest/loadr.min.js"></script>

登入後複製

用法

將 hr-src 加入 HTML Loadr，一種在 HTML 中無縫加載大圖像的高效解決方案中元素，這將是您的高解析度圖片。 src 屬性中是影像的低解析度版本。 Loadr 將在背景載入高解析度圖像，然後用其 URL 更新 src，取代低解析度圖像。

index.html

<img hr-src="https://open-loadr.github.io/loadr/images/the_starry_night/high_res.jpg" src="https://open-loadr.github.io/loadr/images/the_starry_night/low_res.png">

登入後複製

在 Javascript 中呼叫 Loadr。就這樣了？ .

index.html

<script>
  new Loadr();
</script>

登入後複製

查看 Codepen 上的示範。

額外的步驟

讓我們為 Loadr，一種在 HTML 中無縫加載大圖像的高效解決方案加入一些樣式元素。

樣式.css

img {
  height: 300px;
  width: 300px;
  object-fit: cover;
  border-radius: 15px;
  overflow: hidden;
}

登入後複製

客製化

Loadr 帶有可以輕鬆自訂的變數。

<script>
  new Loadr({
    async: false,
    cache: true,
    delay: '750'
  });
</script>

登入後複製

查看 Codepen 上的自訂示範。

以上是Loadr，一種在 HTML 中無縫加載大圖像的高效解決方案的詳細內容。更多資訊請關注PHP中文網其他相關文章！