如何将图片预加载到Orbit滑块中？

Question

如何将图片预加载到Orbit滑块中？

javascriptjqueryimagezurb-foundationorbit

5

问题在于当用户首次访问网站时，滑块未正常显示。测试中，滑块运行良好。加载后的滑块

或者实际上存在问题，即在首次访问页面时，它无法加载，但只有在刷新页面时才会显示出来。但除此之外，滑块会显示，但图像不会显示。滑块加载缓慢

我查看了Zurb的文档Zurb Orbit滑块的文档，他们有一个示例文件。该原始演示文件在图像上方有一个链接（我已删除）。演示代码

我随后使用关键词“轨道预加载图片”在Google上进一步搜索了有关此主题的信息，并找到了一个带有预加载功能的解决方案。以下是我用来预加载的代码（我只修改了图像的路径）

<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>

我已经添加了脚本，但仍未加载。该页面的完整代码可在GitHub上的Gist中查看。

图像滑块的设置代码可在GitHub上的Gist中查看。

该网站托管在一个不支持php的.net环境服务器上。

- JGallardo

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- SolaceBeforeDawn · Accepted Answer

我遇到了同样的问题，在研究后找到了适合我的答案；基本上，您可以使用jquery在加载滑块时隐藏它。此外，请参阅此链接以获取更多信息：如何在加载div #content时显示div #loading 查看您的代码，这应该可以解决问题（未经测试）

在部分中添加以下内容；

<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页面中（从您的页面复制的内容），请注意：保留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; }

希望这能帮到你！