使用异步和内联 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 中不是必需的。