2011-06-22 23 views
0
$(document).ready(function() { 
    $('.previewnetcoid').html('<img src="/www-static/assets/images/ajax-loader.gif" style="display: block; margin: 170px auto;">'); 
    $(window).load(function() { 
     $('.previewnetcoid').show(); 
     $('.previewnetcoid').cycle({ 
      fx: 'scrollLeft', // choose your transition type, ex: fade, scrollUp, shuffle, etc... 
      speed: 2000, 
      timeout: 6000 
     }); 
    }); 
}); 

,你可以看到,即時通訊試圖做給裝載機那麼當如果所有我的圖像加載它會顯示圖像。我想我在這裏弄錯了。這隻能說明裝載機如果圖像加載的jQuery然後運行週期

編輯*我的進步

<script type="text/javascript"> 
$(document).ready(function() { 
    $('.previewnetcoid').hide(); 
    $(window).load(function() { 
     $('#ajax-loader').hide(); 
     $('.previewnetcoid').show(); 
     $('.previewnetcoid').cycle({ 
      fx: 'scrollLeft', // choose your transition type, ex: fade, scrollUp, shuffle, etc... 
      speed: 2000, 
      timeout: 6000 
     }); 
    }); 
}); 

感謝您尋找在

亞當·拉馬丹

+0

什麼是'$( 'previewnetcoid')在...之前'.html(...)'調用? '.html(...)'調用將用加載程序映像替換任何現有的元素。 –

+0

一些div內容與圖像。 –

回答

2

你換成.previewnetcoid與裝載機爲代表元素的含量,所以原創內容不見了。因此,沒有什麼可循環的。

此外,甚至在頁面已經完全加載($(document).ready())之前還沒有完成,因此您正在等待頁面完全呈現以顯示加載動畫。這顯然是不正確的。

您應該將加載動畫HTML放置在實際文檔中,並使用CSS來覆蓋和隱藏頁面(絕對定位,100%寬度和高度以及背景)。然後,在你的JavaScript中它隱藏在頁面加載。

或者,你應該用JavaScript編寫的加載HTML:

<script>document.write(...)</script> 

否則,如果用戶有禁用JavaScript,他們會得到加載圖像,但它永遠不會被刪除。

編輯:(提供示例)

CSS

.loading { 
    position:absolute; 
    left:0; top:0; 
    width:100%; height:100%; 
    background:#000; 
    z-index:9999; 
} 

HTML

<head> 
    ... 
    <link href="loading.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
    <script type="text/javascript"> 
     document.write('<div class="loading"><img src="loading.gif" alt="Loading..." /></div>'); 
    </script> 
    ... 

JS

$(document).ready(function(){ 
    $('.loading').hide(); 
}); 
+0

編輯*仍然沒有得到它,任何例子? –

+0

忘了提及加載器的CSS和HTML應該是文檔中的第一件事。優選地,樣式表應該在''中,並且加載HTML應該是''之後的第一件事。這樣,它將在頁面的其他部分加載之前完全呈現。 –

+0

啊我明白了。謝謝! –