jQuery图像幻灯片一次性加载所有图像

Question

我在网站的头部区域有一个jQuery图像滑块，它会自动地周期性地展示图片。现在的问题是，当您第一次加载页面时（没有缓存），它会一次性加载滑块中的所有图片，并将这些图片对齐到网页上（一个div放在另一个div的上面），因此您会在页面加载时立即看到所有的图片。这看起来不太专业。也许有一个onpageload()函数可以防止所有图片同时显示，或者可以在显示它们之前先在后台加载它们？特别是在网络速度较慢的情况下，这是一个问题...我的网站：http://v4m.mobi。谢谢！

- DextrousDave

Answer 1

将您的图像样式设置为display:none或visibility:hidden，然后在$(window).load()上将它们的样式更改回display:[block/inline/etc]或visibility:visible。

$(window).load(function(){
    $('#myImage1').css('visibility','visible');
    $('#myImage2').css('visibility','visible');
    //etc
});

- HellaMad

---

嗨DC_。谢谢你的回答，但我想知道，我如何在document.ready()函数中将visibility:visible应用于图像？因为html中的图像是在javascript之前加载的。 - DextrousDave

$(window).load，正如其他回答者所建议的那样，实际上可能更好。我在我的答案中编辑了一些示例代码。 - HellaMad

嘿@DC_，你的代码有效了！我想再添加一件事。如果我们有很多图片，那么我们可以改变图片的父div/ul/container的可见性，而不是改变每个图片的可见性。 - Sarvan

Answer 2

你能不能简单地这样做：

.slideshow img {
    display: none;
}

.slideshow img:first-child {
    display: block;
}

它们可能会一次性全部加载，也可能不会，这取决于浏览器，但至少只有一个是可见的。此外，您还可以使用非JavaScript回退方法，使第一张图片可见。

如果您需要支持旧版浏览器，请创建某种“可见”类并将其添加到第一个图像元素中。

- martinedwards

Answer 3

预加载您的图片或使用 jQuery 并通过 window.load() 加载您的代码。

$(window).load(function(){  
// runs after images are loaded  
});  

- j08691

---

谢谢您的回答，我假设您上面的方法使用了Ajax？ - DextrousDave

我尝试了$(window).load(function(){ });函数，但它仍然首先加载图像。它首先加载包含图像的HTML表格，然后才是jQuery和CSS。我还尝试了以下方法(http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/)，但对于慢速互联网速度来说并没有什么帮助。 - DextrousDave

我查看了你的网站，但是我没有看到你使用window.load加载任何内容。此外，你在页面中间有一大段代码，以head标签结尾：`<script type="text/javascript"> $(function() { $('.quickFlip').quickFlip(); }); </script></head>`。你的window.load（甚至是document.ready）应该放在页面的head中。 - j08691

好的，我尝试了这种方法，它有效。但是有一个大问题：它“隐藏”的图像直到页面加载完毕才会显示，而这些图像是我的主横幅图像。现在它们被最后显示。这些是我的“热门”图像，我希望访问者首先看到这些图像，但我不希望这些图像一次性全部加载，一下子堆叠在一起。这些图像都包含在一个表格中，位于父div内部。 - DextrousDave