Question

我在cdn jQuery库的链接中使用defer：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js" defer>
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" defer></script>

这似乎是Google Page Speed要求的一个很好的解决方案。如果我不使用推迟谷歌Page Speed说：删除渲染阻止Javascript

https://developers.google.com/speed/pagespeed/

但是，只要我使用defer，jQuery ui就不起作用了。例如，这段代码需要ui。当我添加延迟时，动画不会发生。 jQuery的：

$("#button").click(function() {
    $(this).animate({ color:'blue' },1000);
});

HTML：

<div id="button">SOMETHING</div>

为什么推迟导致jQuery UI出现问题以及如何解决？

Answer 1

您不能依靠内联javascript代码中的延迟脚本。您必须等待事件 DOMContentLoaded ，该事件会在所有延迟的脚本加载后触发：

document.addEventListener("DOMContentLoaded", function(event) {
    // now deferred scripts are loaded.
    $("#button").click(function() {
        $(this).animate({ color:'blue' },1000);
    });
});

推迟jQuery cdn并与jQuery UI冲突

1 个答案: