如何将图像预加载到 Orbit 滑块中？答案

【问题标题】：How do you preload images into the Orbit slider?如何将图像预加载到 Orbit 滑块中？
【发布时间】：2013-03-28 13:12:46
【问题描述】：

问题在于，当用户首次访问该网站时，滑块未正确显示。在测试滑块工作正常。

或者实际上存在问题，它在第一次访问页面时不会加载，但会在您刷新页面时（且仅当）显示。但否则会显示滑块但不会显示图像

我查看了来自 Zurb Zurbs documentation for the Orbit slider 的文档，他们有一个示例文件，该原始演示文件在图像上方有一个链接（我删除了）

然后，我使用关键字“轨道预加载图像”在 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中查看

该站点托管在不支持 php 的 .net 环境中的服务器上。

【问题讨论】：

标签： javascript jquery image zurb-foundation orbit

【解决方案1】：

我遇到了同样的问题，经过一番研究，找到了适合我的答案；基本上，您可以使用 jquery 在加载时隐藏滑块。另请参阅此链接以获取更多信息：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>

在您的 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; }

希望对您有所帮助！

【讨论】：

很好的答案，我应该提到该站点的服务器位于不支持 php 的 .net 环境中。你知道如何解决这个问题吗？
我从您的文件中获取了代码，因此您只需将添加的内容添加到该文档（以及标题和 css）中。上面实际上没有任何 PHP 代码 - 只有您可以放心忽略的注释文本。