JSプリロードイメージの実装

この記事では主に、画像をプリロードする JS の実装について共有し、皆様のお役に立てれば幸いです。

要件: プロジェクト内のボタンをクリックして、背景画像を切り替える機能を実現します。
問題: CSSのbackground-image属性を切り替える際、画像が先に読み込まれてから表示されると、一瞬空白期間が生じます。

解決策: 背景画像を事前にプリロードします
まず、Image() コンストラクターを使用してオフスクリーン イメージ オブジェクトを作成し、次にそのオブジェクトの src 属性を URL に設定します。image 要素はドキュメントに追加されていないため、表示されませんが、ブラウザーは引き続き読み込まれます。画像を取得してキャッシュします。

function preloadImg(url){
  var imageObj = new Image()
  imageObj.src=url
}var aImgUrlList = ['image1.png', 'image2.png']for (var i of aImgUrlList)
    preloadImg(i)

関連する推奨事項:

js プリロード画像メソッドの概要_JavaScript スキル

以上がJSプリロードイメージの実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。