近年來html 的最佳改進之一是loading="lazy" 屬性，您可以將其添加到圖像（也包括iframe）中，該屬性將告訴瀏覽器不要載入圖像直到出現在視口中。

非常簡單，非常有用。但如果您也可以對腳本執行此操作，那就太好了。這樣你就可以延遲載入你的元件，只有當它們確實需要時...

嗯， 元素的另一個功能是能夠在映像使用 onload 和 onerror 屬性載入（或不載入）之後運行腳本。

console.log('圖片已載入')" >

此 onload「回呼」僅在載入映像時才會觸發，如果映像是延遲載入的，則僅當圖片位於視窗中時才會觸發。瞧！延遲載入的腳本。

不幸的是，像這樣，它沒有多大用處。首先，您的頁面上會出現不需要的映像，其次，您需要內聯要執行的 JavaScript，這有點違背了延遲載入的目的。因此，讓我們做出一些改變來改進這一點。

影像本身可以是任何東西，或者更重要的是，什麼都不是。正如我之前提到的，有一個 onerror 回調，顧名思義，當圖像

不加載時，它將觸發。

這並不意味著您需要將 src 指向不存在的圖像，這會導致控制台充滿關於丟失圖像的紅色 404 錯誤，並且沒有人希望這樣。

如果 src 影像實際上不是影像，也會觸發 onerror 回調，最簡單的方法是使用 data: 格式「錯誤地編碼」影像。這還有一個好處，就是不會在控制台中填充丟失影像的警告？

console.log('圖片未載入')" >

這仍然會導致頁面出現「損壞的圖像」縮圖，但我們會解決這個問題。

好吧，但是我們仍然需要內聯我們想要運行的 javascript，那麼我們要如何解決這個問題？

好吧，現在ES 模組支援幾乎是普遍的，我們可以使用非常強大的

event-import-then-default javascript 載入技術在事件觸發後載入腳本，如下所示：

_.default(this))" >

注意：這也適用於 onclick、onchange 等事件
注意：底線只是存取模組的簡寫方式，你也可以寫 .then(Module => Module.default(this))

好吧，那這是怎麼回事！ ？

首先讓我們來看看某些元件可能會是什麼樣子：

// 一些元件.js 匯出預設元素=> { 元素.outerHTML = ` `; }

因此，您可能已經註意到，在 onerror 回調中，我將其作為參數傳遞給預設導出。我這樣做的原因是

this （請原諒雙關語？）是為了給腳本調用它的 ，因為在this （我又做了一次？）上下文this = .

現在您可以簡單地使用 element.outerHTML 以您的 html 標記替換損壞的映像，然後您就擁有了延遲加載的腳本！ ？

快取和傳遞參數

如果您在一個頁面上多次使用此技術，那麼您需要向資料傳遞「快取清除」索引或隨機數：例如，類似：

_.default(this))" > _.default(this))" >

「:,」後面的字串可以是任何內容，只要它們不同即可。

將參數傳遞給函數的一個非常簡單的方法是在 html 中使用 data-something 屬性，如下所示：

_.default(this))" >

由於我們將 this 傳遞給函數，您可以像這樣存取資料屬性：

匯出預設元素=> { const { 訊息 } = element.dataset 元素.outerHTML = ` `; }

請在評論中告訴我您的想法！ ❤️