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

Your first attempt was a good start. Basically do something like this:

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);
});