この記事では主に、画像をプリロードする 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 サイトの他の関連記事を参照してください。