我有以下 html 代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/blazy/1.8.2/blazy.min.js" defer></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js" integrity="sha256-8WqyJLuWKRBVhxXIL1jBDD7SDxU936oZkCnxQbWwJVw=" crossorigin="anonymous" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/js/lightbox.min.js" defer></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous" defer></script>
<!-- 26 dec flexslider js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/jquery.flexslider.min.js" defer></script>
<script defer>
(function($) {
$(document).ready(function() {
//do something with b-lazy plugin, lightbox plugin and then with flexslider
});
})(jQuery);
</script>
</head>
<body>
</body>
</html>
我得到一个错误，说 jQuery 没有定义。现在，即使我从我的内联 JS 代码中删除 defer，它也会说 jQuery 是未定义的。出于某种原因，我必须将 jQuery 插件保留在头部并使我的 JS 代码保持内联。我的问题是:
当
defer属性存在时，为什么内联 Javascript 代码不会被延迟？有没有办法模仿我的内联 Javascript 代码的延迟行为？如果需要，我可以将它放在 body 标签的末尾。
最佳答案
具有 defer 属性的脚本按指定顺序加载，但不在文档本身加载之前。因为 defer 对 script 标签没有影响，除非它们也有 src 属性，第一个执行的脚本是你的内联脚本。所以那个时候 jQuery 还没有加载。
您至少可以通过两种方式解决此问题:
将内联脚本放在
.js文件中，并使用src属性(除了defer属性之外)引用它你已经在那里)或让您的内联脚本等待文档和延迟脚本的加载。
DOMContentLoaded事件将在发生时触发:<script> window.addEventListener('DOMContentLoaded', function() { (function($) { //do something with b-lazy plugin, lightbox plugin and then with flexslider })(jQuery); }); </script>
注意:请注意，在后一种情况下，$(document).ready(function() 不再包含在内，因为它会等待相同的事件 (DOMContentLoaded)。您可以仍然像在原始代码中那样包含它，但是 jQuery 只会立即执行回调，这没有实际区别。
关于javascript - 如何延迟内联 Javascript？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41394983/