JavaScriptで画像をプリロードする方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptで画像をプリロードする方法について現役エンジニアが解説しています。プリロードとは、ウェブサイトに設置している画像などをサイトを開いた段階で事前に読み込んでおく方法のことです。JavaScriptとjQueryの場合でプリロードする方法を解説します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptで画像をプリロードする方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptで画像をプリロードする方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

プリロードとは

プリロードとは、ウェブサイトに設置している画像などのイメージファイルをウェブサイトを開いた段階で事前に読み込んでおく方法のことです。

例えば、ファイルサイズが大きい画像を表示するタイミングで読み込むと、時間がかかりユーザーを待たせてしまうことになります。

そのため、必ず見せたい画像やGIFファイルなどは画面読み込み時に事前に読み込んでおくことで、表示をスムーズにすることが可能です。

 

jQueryを使わずにJavaScriptで画像をプリロードする方法

JavaScriptで画像のプリロードを行う場合は、ウェブページ読み込み時にdocument.createElement(img)を使用してimgタグを作成し画像のURLを設定することで事前読み込みが行われます。

var images = [

'images/preload_image1.png',

'images/preload_image2.png',

'images/preload_image3.png'

]

window.onload = function(){
// 画像プリロード

for (i = 0; i < images.length; i++){

var img = document.createElement('img');

img.src = images[i];

}
}

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

jQueryを使って画像をプリロードする方法

jQueryでも画像のプリロードを行う場合は、imgタグにsrc属性を指定することでJavaScriptのcreateElementと同じような挙動が可能です。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function(){
jQuery.preloadImages = function(){
for(var i = 0; i<arguments.length; i++){
jQuery("<img>").attr("src", arguments[i]);
}
};
$.preloadImages("images/preload_image1.png","images/preload_image2.png",
"images/preload_image3.png","images/preload_image4.png",
"images/preload_image5.png");
});
</script>

 

執筆してくれたメンター

水野大輝(みずのたいき)

2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。

現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

JavaScriptで画像をプリロードする方法がよくわかったので良かったです!

田島悠介

ゆかりちゃん、これからも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。