javascript - 在移动浏览器中加载 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

在文档准备好之前，您的代码不会运行；这意味着您将简要地看到该元素，直到该document.ready方法在 jQuery 中被触发。您可以使用代码隐藏元素并将其直接放在元素之后，将其从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 引导解决方案？ http://twitter.github.com/bootstrap/scaffolding.html