javascript - 使用异步和内联 JavaScript

Question

我已将“异步”添加到我的一些脚本中(见下文)，但我的返回页首链接脚本现在不显示或无法运行。任何想法，因为我不太了解 JavaScript，而且我似乎找不到答案？下面是位于正文底部的代码:

<div class="sprite topsite active" style="display: none;">
<a href="#nav">Back to top arrow</a>
</div>

<script async src="content/js/hideaddressbar.min.js"></script>
<script async src="content/js/respond.min.js"></script>
<script async type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script async src="content/js/picturefill.min.js"></script>

<!-- back to top link -->
<script>
    $(document).ready(function() {
        // Show or hide the sticky footer button
        $(window).scroll(function() {
            if ($(this).scrollTop() > 200) {
                $('.topsite').fadeIn(500);
            } else {
                $('.topsite').fadeOut(300);
            }
        });

        // Animate the scroll to top
        $('.topsite').click(function(event) {
            event.preventDefault();

            $('html, body').animate({scrollTop: 0}, 300);
        })
    });
</script>

如有任何帮助，我们将不胜感激，谢谢!

Answer 1

您的内联脚本依赖于 jQuery。因此，如果您异步加载 jQuery(当 jQuery 在后台加载时页面将继续加载)，您将不得不等待脚本，直到加载 jQuery。

我建议您首先同步加载 jQuery，以便它可以成为您其他脚本的基础。

async-attribute 旨在通过并行加载脚本来提高加载速度，这在 document.ready 中不是必需的。