JS 图像循环器 - 在后台加载

Question

我有一个棘手的小问题。我刚刚开始设计一个带有自行车背景图像的网站。目前它工作正常，尽管您可以看到备用背景图像与第一个看起来有点混乱的图像一起加载。我可以很容易地隐藏这些图像，但我觉得更好的解决方案是让第一个图像在其他图像之前加载以加快页面加载速度。不幸的是，我无法弄清楚如何将其合并到我现有的 JS 中。

网站的开头是here（它可能会在某个时候被破坏，我仍在试验中）。

我现在的 JS：

function cycleImages(){
      var $active = $('#background-cycler .active');
      var $next = ($('#background-cycler .active').next().length > 0) ? $('#background-cycler .active').next() : $('#background-cycler img:first');
      $next.css('z-index',2);//move the next image up the pile
      $active.fadeOut(1500,function(){//fade out the top image
      $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
      $next.css('z-index',3).addClass('active');//make the next image the top one
      });
    }

    $(window).load(function(){
        $('#background-cycler').fadeIn(1500);//fade the background back in once all the images are loaded
          // run every 7s
          setInterval('cycleImages()', 7000);
    })

HTML：

<div id="background-cycler" >

<script type="text/javascript">
$('#background_cycler').hide();//hide the background while the images load, ready to fade in later
</script>

<img class="active" src="images/bg1.jpg" alt=""/>
<img src="images/bg2.jpg" alt=""/>
<img src="images/bg3.jpg" alt=""/>
<img src="images/bg4.jpg" alt=""/>      
<img src="images/bg5.jpg" alt=""/>
</div>

您能给予的任何帮助将不胜感激！！ :)

编辑：我遇到的另一个问题是我在每个页面上都需要这个，但我不想每次都重新加载图像。我是否认为图像仍会被缓存？

Answer 1

这是我的看法：

http://jsfiddle.net/bortao/9TxED/

您隐藏图像元素，仅在触发onload 事件时将其淡入。

是的，浏览器会在整个站点中缓存所有图像。

HTML

<div id="background-cycler" class="background-cycler">
    <img id="imgPrev" />
    <img id="imgNext" />
</div>

CSS

.background-cycler {
    width: 1000px;
    height: 600px;
}
.background-cycler img {
    position: absolute;
    left: 0px;
    top: 0px;
}

JS

var imgs = [
    'http://ravenstudio.co.uk/izzy/images/bg1.jpg',
    'http://ravenstudio.co.uk/izzy/images/bg2.jpg',
    'http://ravenstudio.co.uk/izzy/images/bg3.jpg',
    'http://ravenstudio.co.uk/izzy/images/bg4.jpg',
    'http://ravenstudio.co.uk/izzy/images/bg5.jpg']

var imgNext = document.getElementById("imgNext");
var imgPrev = document.getElementById("imgPrev");
var currentImg = -1;
var MAX_IMAGES = 5;
var CYCLE_DELAY = 2000;
var FADE_DELAY = 1500;

imgNext.onload = function () {
    // When finished loading:
    $(this).fadeIn(FADE_DELAY, function() {
        // When fadeIn ends:
        imgPrev.src = imgs[currentImg]; // Send current image to back
    }); // Fade in loaded image
    window.setTimeout('cycleImages()', CYCLE_DELAY + FADE_DELAY); // Set next cycle
};

cycleImages = function () {
    currentImg++;
    if (currentImg == MAX_IMAGES) currentImg = 0;
    imgNext.style.display = "none"; // Hide before loading
    imgNext.src = imgs[currentImg]; // Load new image. 
    // After imgNext finish loading, onload above will be called
}

cycleImages(); // Call the first cycle