如何將圖像預加載到Orbit滑塊？

Question

問題是當用戶首次訪問該站點時滑塊無法正常顯示。 在測試中滑塊工作正常。 加載后滑塊的位置

或者實際上存在首次訪問頁面時無法加載的問題，但是當您刷新頁面時（並且僅在何時）顯示該問題。 但是否則滑塊顯示但不顯示圖像 滑塊如何加載不良

我查看了Zurb在Zurbs文檔中關於Orbit滑塊的文檔，他們有一個示例文件，原始演示文件在圖像上方有一個鏈接（我刪除了） 演示代碼

然后，我使用關鍵詞“orbit preload images”使用關於此主題的短語在Google上搜索更多內容，並找到了具有預加載功能的One解決方案。 下面是我用來預加載的代碼（我只修改了圖像的路徑）

<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環境中的服務器上。

Answer 1

我有同樣的問題，經過一些研究，找到了對我有用的答案; 基本上，您可以使用jquery在加載時隱藏滑塊。 另請參閱此鏈接以獲取更多信息：如何在div #content loading時顯示div #loading

看看你的代碼，這應該工作（未經測試）

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

希望有所幫助！

如何將圖像預加載到Orbit滑塊？

問題描述

1 個解決方案

解決方案1
3 已采納 2013-04-25 02:49:39

如何將圖像預加載到Orbit滑塊？

問題描述

1 個解決方案

解決方案1 3 已采納 2013-04-25 02:49:39

解決方案1
3 已采納 2013-04-25 02:49:39