如何在轮播中为图像创建预加载器

Question

我正在寻找一种方法为我的网站轮播预加载图像。它们在页面加载时很难加载。 有现代优雅的方式吗？

我尝试没有成功：

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

和css preload：

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