近年の HTML の最も優れた改良点の 1 つは、画像 (iframe も含む) に追加できる、ブラウザーにビューポートに表示されるまで画像を表示します。

非常にシンプルで、非常に便利です。しかし、これをスクリプトでも実行できたら素晴らしいと思いませんか。これにより、コンポーネントが実際に必要な場合にのみ、コンポーネントを遅延ロードできるようになります...

要素が持つもう 1 つの機能は、onload 属性と onerror 属性を使用して画像が読み込まれた (または読み込まれなかった) 後 にスクリプトを実行する機能です。

この onload の「コールバック」は、画像がロードされたときにのみ起動され、画像が遅延ロードされている場合は、画像がビューポートにあるときにのみ起動されます。さあ！遅延ロードされたスクリプト。

残念ながら、このままではあまり役に立ちません。まず、ページ上に不要な画像が表示されます。次に、実行したい JavaScript をインライン化する必要があります。これでは遅延読み込みの目的が損なわれます。そこで、これを改善するためにいくつかの変更を加えてみましょう。

画像自体は何でも構いませんが、もっと重要なことに、何もなくても構いません。前に述べたように、onerror コールバックがあります。これは、名前が示すように、画像が 読み込まれない ときに起動されます。

これは、存在しないイメージを src に指す必要があるという意味ではありません。その場合、コンソールがイメージの欠落に関する赤い 404 エラーでいっぱいになりますが、誰もそれを望んでいません。

onerror コールバックは、src 画像が実際には画像でない場合にも起動されます。その最も簡単な方法は、data: 形式を使用して画像を「不正にエンコード」することです。これには、画像が見つからないという警告でコンソールがいっぱいにならないという利点もあります ?

この場合もページには「壊れた画像」サムネイルが表示されますが、それについては後ほど説明します。

わかりました。でも、実行したい JavaScript をインライン化する必要があります。どうすれば修正できますか?

ES モジュールのサポートがほぼ普遍的になったので、非常に強力な event-import-then-default JavaScript 読み込みテクニックを使用して、次のようにイベントの発生後にスクリプトを読み込むことができます。

注: これは、onclick、onchange などのイベントにも機能します
注: アンダースコアはモジュールにアクセスするための簡略的な方法です。.then(Module => Module.default(this))

それで、ここで何が起こっているのですか!?

まず、some-component がどのようなものかを見てみましょう:

// some-component.js

export default element => {
    element.outerHTML = `
        

            
Hello world!
        
    `;
}

それで、onerror コールバックで、これを引数としてデフォルトのエクスポートに渡したことに気づいたかもしれません。私が this を実行した理由は、this (またやった?) context this = をスクリプトに与えるためでした。画像>.

これで、単純に element.outerHTML を実行して壊れた画像を HTML マークアップに置き換えることができ、遅延読み込みされたスクリプトが完成しました。 ?

キャッシュと引数の受け渡し

この手法をページ上で複数回使用する場合は、「キャッシュ無効化」インデックスまたは乱数をデータに渡す必要があります。たとえば、次のようになります。

「:」の後の文字列は、異なるものであれば何でも構いません。

関数にパラメータを渡す非常に簡単な方法は、次のように HTML で data-something 属性を使用することです。

this を関数に渡しているため、次のようにデータ属性にアクセスできます。

export default element => {
    const { message } = element.dataset
    element.outerHTML = `
        

            
${message}
        
    `;
}

ぜひコメント欄でご意見をお聞かせください。 ❤️