javascript - 页面加载后运行多个脚本

Question

我有以下javascript：

<script type="text/javascript">
        $('#HomeSlideShow ul.images').jSlideshow({
            auto: true,
            delay: 15,
            indicators: '#HomeSlideShow ul.indicators'
        });
</script>

和：

<script type="text/javascript">window.onload = function () {
document.getElementById('Features').style.visibility = 'Visible';
};</script>

我想将第一个脚本合并到第二个脚本的 onload 函数中。这样两个脚本都会在页面加载后运行。

Answer 1

这将在 DOM 加载后运行。http://api.jquery.com/ready/

$(document).ready(function() {

        $('#HomeSlideShow ul.images').jSlideshow({
            auto: true,
            delay: 15,
            indicators: '#HomeSlideShow ul.indicators'
        });

        document.getElementById('Features').style.visibility = 'Visible';

});

或 .ready() 的简写

$(function() {

            $('#HomeSlideShow ul.images').jSlideshow({
                auto: true,
                delay: 15,
                indicators: '#HomeSlideShow ul.indicators'
            });

            document.getElementById('Features').style.visibility = 'Visible';

});

Answer 2

<script type="text/javascript">
    $(function() {
        $('#HomeSlideShow ul.images').jSlideshow({
            auto: true,
            delay: 15,
            indicators: '#HomeSlideShow ul.indicators'
        });

        $('#Features').css({ visibility: 'Visible' });
    });
</script>

使用 jQuery 添加尽可能多的内容以在页面加载时运行。它可以像这样轻松完成：

<script type="text/javascript">
    $(function() {
        $('#HomeSlideShow ul.images').jSlideshow({
            auto: true,
            delay: 15,
            indicators: '#HomeSlideShow ul.indicators'
        });
    });
</script>

...

<script type="text/javascript">
    $(function() {
        $('#Features').css({ visibility: 'Visible' });
    });
</script>