Question

我已经为我的一些脚本添加了'async'（见下文），但是我的返回顶部链接脚本现在不显示或运行。任何想法，因为我不太了解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中是不必要的。

使用异步和内联JavaScript

1 个答案: