问题是当用户第一次访问网站时， slider 没有正确显示。在测试 slider 工作正常。
或者实际上存在的问题是它在第一次访问页面时不会加载，但会在(且仅在)您刷新页面时显示。但除此之外， slider 会显示但不会显示图像
我在 Zurbs documentation for the Orbit slider 查看了 Zurb 的文档他们有一个示例文件，原始演示文件在图像上方有一个链接(我删除了)
然后我使用关键字“轨道预加载图像”使用关于该主题的短语在 Google 上进行了更多搜索，并找到了 One solution具有预加载功能。下面是我用来预加载的代码(我只修改了图片的路径)
<script language="javascript">
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
});
}
preload([
'../images/products/mill/slider/dentist.jpg',
'../images/products/mill/slider/side.jpg',
'../images/products/mill/slider/before.jpg',
'../images/products/mill/slider/after.jpg',
'../images/products/mill/slider/radio.jpg'
]);
</script>
我继续添加脚本，但它仍然没有加载。该页面的完整代码可在 Gist on GitHub 中查看。
可以在 Gist on GitHub 中查看图像 slider 设置代码。
该站点托管在不支持 php 的 .net 环境中的服务器上。
最佳答案
我遇到了同样的问题，经过一番研究，找到了适合我的答案； 基本上，您可以使用 jquery 在加载时隐藏 slider 。 另请参阅此链接以获取更多信息:how to show div #loading whilst div #content loads
查看your code ，这应该可以工作(未经测试)
在<head>部分，添加这个；
<script type="text/javascript">
jQuery(document).ready(function() {
// hide orbit slider on load when user browses to page
$('#featured.orbit').hide(); // hide div, may need to change id to match yours
$('.loading').show(); // show the loading gif instead
// then when the window has fully loaded
$(window).bind('load', function() {
$('.loading').hide(); // hide loading gif
$('#featured.orbit').fadeIn('slow'); // show orbit
});
});
</script>
在包含轨道 slider 代码的 html 页面中(从您的页面复制的内容)
<!-- =======================================
ORBIT SLIDER CONTENT
======================================= -->
<div style="width:100%;">
<div style=" max-width:480px; margin: 0px auto;">
<div id="featured" >
<!-- your content etc..... -->
<span class="orbit-caption" id="radioCaption">Radiograph shows crown seated with
excellent marginal integrity</span>
</div>
</div>
<?php //
// load the loading image - you need to add one to your image directory
// see here to generate one: http://www.ajaxload.info/ ?>
<div class="loading">
<img src="http://www.yourdomain.com/path/to/folder/loading.gif"/>
</div>
</div> <!-- end twelve columns-->
在您的 CSS 中，您需要隐藏 #featured div
#featured { display: none; background: #f4f4f4; height: 600px;}
#featured img { display: none; }
#featured.orbit { background: none; }
.loading {margin: 0 auto;text-align:center;margin:30px; }
希望对您有所帮助!
关于javascript - 如何将图像预加载到 Orbit slider 中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15845482/