javascript – 如何将图像预加载到Orbit滑块？

问题是当用户首次访问该站点时滑块无法正常显示.在测试中滑块工作正常.

或者实际上存在首次访问页面时无法加载的问题,但是当您刷新页面时(并且仅在何时)显示该问题.但是否则滑块显示但不显示图像

我查看了Zurb在Zurbs documentation for the Orbit slider的文档,他们有一个示例文件,原始演示文件在图像上方有一个链接(我删除了)

然后我使用关键词“orbit preload images”使用关于此主题的短语在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环境中的服务器上.

解决方法

我有同样的问题,经过一些研究,找到了对我有用的答案;
基本上,您可以使用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; }

希望有所帮助！

javascript – 如何将图像预加载到Orbit滑块？

解决方法

猜你在找的JavaScript相关文章