jQuery图像滑块一次加载所有图像答案

【问题标题】：jQuery image slider loads all images at oncejQuery图像滑块一次加载所有图像
【发布时间】：2012-01-23 15:00:41
【问题描述】：

我的网站标题部分有一个 jQuery 图像滑块，它以自动滑动动作定期显示图像。现在的问题是，当您第一次加载页面时（没有缓存任何内容），它会一次加载滑块中的所有图像，并将网页上的图像一个在另一个上对齐（一个 div 在另一个顶部)，因此您可以在页面加载的那一刻立即看到所有图像。看起来不是很专业。是否有某种 onpageload() 函数可以阻止所有图像一次显示，或者可以在显示它们之前先在后台加载它们？这尤其是网速较低的问题...我的网站：http://v4m.mobi

谢谢！

【问题讨论】：

标签： jquery

【解决方案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
});

【讨论】：

嗨 DC_。感谢您的回答，但我想知道，我究竟如何使用 document.ready() 函数在图像上应用可见性：可见性？由于 html 中的图像是在 javascript 之前加载的
$(window).load 正如其他回答者所建议的那样，实际上可能更好。我用一些示例代码编辑了我的答案。
嘿@DC_ 你的代码成功了！我想再补充一件事。如果我们有很多图像，那么我们可以更改图像本身的父 div/ul/container 的可见性，而不是更改每个图像的可见性。

【解决方案2】：

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

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

【讨论】：

感谢您的回答，我假设您上面的方法使用了 Ajax？
我试过 $(window).load(function(){ });功能，但它仍然加载图像的第一件事。它首先加载包含图像的 html 表，然后加载 jquery 和 css。我还尝试了以下方法（perishablepress.com/press/2009/12/28/…），但确实没有帮助，尤其是在网速较慢的情况下。
我查看了您的网站，但没有看到您使用 window.load 加载任何内容。另外，您在页面中间有一大段代码以 head 标签结尾：<script type="text/javascript"> $(function() { $('.quickFlip').quickFlip(); }); </script> </head>。你的 window.load（甚至 document.ready）应该在页面的头部。
好的，我试过这个方法，它有效。但是有一个大问题：在页面加载之前它“隐藏”的图像是我的主要横幅图像。它们现在显示在最后。现在这些是我的“热门”图像，我希望访问者首先看到这些图像，但我不希望图像一次全部加载，乍一看一个在另一个之上。图像都包含在一个表中，在一个父 div 内。

【解决方案3】：

你能不能简单点：

.slideshow img {
    display: none;
}

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

根据浏览器的不同，它们可能会或可能不会一次全部加载，但至少只有一个可见。此外，您还拥有可见的第一张图片的非 JavaScript 后备。

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

【讨论】：