画像をプリロード(事前読み込み)する方法

2020-04-06

プリロード(事前読み込み)

マウスオーバーで画像を変更する場合などで画像データが重かったりすると、読み込みまでの時間がかかって表示されなかったりすることがあります。

そういう時にプリロード(事前読み込み)をしておくことで少しでも改善する方法MEMO。

サンプルコード

$(function () {
  //画像のプリロード
  function preload_images() {
    var images = [];
    for (var i = 0; i < arguments.length; i++) {
      images[i] = new Image();
      images[i].src = preload_images.arguments[i];
    }
  }
  //事前に読み込む画像パス
  preload_images(
    "./img/img01-on.jpg",
    "./img/img02-on.jpg",
    "./img/img03-on.jpg",
  );

  //マウスオーバー
  var $img_item = $(".img_item");
  var img_src_off, img_src_on;
  $img_item.hover(
    function () {
      img_src_off = $(this).find("img").attr("src");
      img_src_on = img_src_off.replace("-off", "-on");
      $(this).find("img").attr("src", img_src_on);
    },
    function () {
      $(this).find("img").attr("src", img_src_off);
    },
  );
});