jquery - カルーセル内の画像のプリローダーを作成する方法

Question

ウェブサイトのカルーセル用に画像をプリロードする方法を探しています。それらはページの読み込み時に読み込まれます。それを行うためのモダンでエレガントな方法はありますか？

私は成功せずに試しました：

  var images = [];
  $('.gallery_panel').each(function(){images.push($(this).attr('src'));});
  $('.gallery_thumbs').each(function(){images.push($(this).attr('src'));});

そしてCSSプリロード：

<style>
   #preloadedImages {
     width: 0px;
     height: 0px;
     display: inline;
     background-image: url(images/....png);
     background-image: url(images/....png);
     background-image: url(images/....png);
   }
</style>

Answer 1

あなたの最初の試みは良いスタートでした。基本的に次のようなことを行います。

var images = [];

$('.gallery_panel').each(function(){
    var src = $(this).attr('src');
    var image = new Image();

    image.src = src;
    images.push(image);
});
$('.gallery_thumbs').each(function(){
    var src = $(this).attr('src');
    var image = new Image();

    image.src = src;
    images.push(image);
});