如何在预加载时显示第一张图像

Question

我很感激有人在我正在开发http://staging.intatec.co.uk/的网站上查看javascript（jQuery）代码。

我正在第一页上进行幻灯片效果（使用CrossSlide plugin），并且会有大量的大图像要运行。我想做的是：

1）在第一张图片加载时显示加载图形;

2）加载后，在加载剩余图像时显示第一张图像。

我觉得我很喜欢那里，但有时它会起作用/有时它不会/有时会出现故障。我的代码如下：

$('.hero-image').hide();
  $(function() {
    var firstImage = $('.hero-image:first-child')
    $(firstImage).load(function() {
      var images = $('.hero-image')
      var crossSlideArray = new Array
      var direction = "up"
      images.each(function() {
        crossSlideArray.push({ src:$(this).attr('src'),dir:direction,href:"http://www.intatec.co.uk/product_groups/" + $(this).attr('alt'),alt:$(this).attr('alt').capitalize()})
        direction = (direction == "up") ? "down" : "up"
      })

      $('#hero-holder').removeClass("loading").delay(200).after("<div id='caption'></div>");

      $('#hero-holder').crossSlide({
        speed: 40,
        fade: 1.5
      }, crossSlideArray, function(idx,img,idxOut,imgOut) {

      $('#caption').html("<h3>" + img.alt + "</h3>").animate({opacity: 0.8});
    });
  })
})

由于

罗宾