在手機瀏覽器中的javascript加載

Question

當瀏覽器寬度減小時，我已將此JavaScript應用於我的網站以隱藏某個元素。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $(window).bind("resize", function() { 
      $('#slideshow').toggle($(this).width() >= 960); 
     }).trigger("resize"); 
    }); 
</script> 

但是在移動瀏覽器中，它會在刪除它之前快速顯示該元素。有沒有人有任何想法如何解決這個問題？

Answer 1

您的代碼在文檔準備就緒之前不會運行;這意味着在jQuery中觸發document.ready方法之前，您會看到該元素。您可以使用代碼隱藏該元素，並將其直接放置在該元素之後，將其從document.ready包裝中移除。

<div id="slideshow"></div> 
<script> 
    $('#slideshow').toggle($(window).width() >= 960); 
</script> 

或者，您可以默認隱藏該元素，並在符合相應條件時使用JavaScript顯示它。

<style>#slideshow { display: none }</style> 

<div id="slideshow"></div> 

<script> 
    $('#slideshow').toggle($(window).width() <= 960); 
</script> 

Answer 2

您是否試過twitter bootstrap解決方案？ http://twitter.github.com/bootstrap/scaffolding.html