圖檔在點選之後

​

前言

在前端性能優化的話題中，我們經常能夠看見，圖像延遲加載。

<img href="image.webp" alt="Image description" loading="lazy">

在延遲加載的情況下，隻有使用者向下滾動，知道出現在使用者眼前，圖檔才開始加載。在面對大量圖檔的情況下，極大的提高了頁面的加載速度。

我們今天不讨論這種情況，讨論一些圖檔如何在點選的時候才開始加載。

不帶src屬性使用

對于img标簽，浏覽器通過是被src中的連結，來請求圖檔，進而将圖檔加載到畫面中。是以我們可以将src的内容置空，這樣浏覽器就無法請求圖檔，然後通過将連接配接指派在其他屬性下，起到存儲圖檔位址的作用。

<img data-src="圖檔位址" src="" alt="圖檔">      

這裡的圖示是浏覽器自己生成的。

document.querySelectorAll("img").forEach((item) => {
  item.addEventListener("click", (event) => {
    const image = event.target.getAttribute("data-src");
    event.target.setAttribute("src", image);
  });
});      

這種方法雖然簡單易用，但是在圖檔加載失敗的時候，會産生一個破損圖像的圖示，并且我們也沒有方法去修改這個圖示，而且我們這裡必須設定alt屬性，如果不設定的話，破損圖示也沒法顯示。有人可能在想通過css來設定一個圖示，類似這樣！

img[src$="加載失敗的圖檔"] {
  object-fit: contain;
  outline: 1px solid #ddd;
  outline-offset: -1px;
}      

但我想說雖然可以設定一張很小的圖檔，但是還是要去請求圖檔，與預想不符合。

使用<a>建立圖像

我們選擇超連結來試試：

<a href="圖檔">點選檢視圖檔<a>

這樣确實是可以顯示圖檔，但是缺點是，打開的是一個圖檔的連結。并不符合我們的預期。但是這種方式确實是不

是以我們需要改造他。

我們可以使用 JavaScript 來阻止連結在點選時加載，擷取該href連結中的屬性，建立一個圖像元素，最後将該圖像扔到頁面上并在完成後删除舊元素：

document.querySelectorAll(".load-image").forEach((item) => {
  item.addEventListener("click", (event) => {
    const href = event.target.getAttribute("href");
    const newImage = document.createElement("img");
    event.preventDefault();
    newImage.setAttribute("src", href);
    document.body.insertBefore(newImage, event.target);
    event.target.remove();
  });
});