jQueryで画像を先読みする方法(プリロード)

javascript
この記事は約2分で読めます。
スポンサーリンク

jQueryで画像を先読みするしたい時、例えば他のページのトップ画像とかを先読みさせておけば
別ページへ遷移した時にスルッと表示できる。まるで遷移してないみたいに振舞えるんだ。
では、jsファイルの「function」のすぐ下に先読み(プリロード)したい画像を置いてみよう!

jQuery

$('<img src="img.jpg">');

これ、画像が複数ある場合は、分かりやすくこう書いても良いよ!

$('<img src="img1.jpg">');
$('<img src="img2.jpg">');
$('<img src="img3.jpg">');
$('<img src="img4.jpg">');
$('<img src="img5.jpg">');

もし画像が何百枚もあったら、こうやって書くと、、、、ちょっと長くなっちゃって変な感じするよね。
そしたら、こう書いてもいいよ!

function sakiyomi() {
  for(var i = 0; i< arguments.length; i++){
		$('<img src=' + arguments[i] + '>');
  }
}
sakiyomi('img1.jpg', 'img2.jpg', 'img3.jpg', 'img4.jpg', 'img5.jpg', 'img100.jpg');

jQUeryを使った画像1つの先読み(プリロード)から画像数十~数百枚の先読み(プリロード)をご紹介しました!
この記事がいいなと思ったら、下のイイねボタンかチャンネル登録。。。。って
ユーチューバーさんが言うアレ。ちょっと好きです。

SNSフォローボタン
エンデ・バタローをフォローする
javascriptjQueryサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました