我有以下 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 代码内联。我的问题是：
为什么内联 Javascript 代码在以下情况下不会被延迟：defer属性存在吗？
有没有办法模仿我的内联 Javascript 代码的延迟行为？如果需要，我可以将其放在正文标记的末尾。
脚本与defer属性按照指定的顺序加载，但是之前没有文档本身已被加载。作为defer没有影响script标签，除非它们也有src属性，执行的第一个脚本是内联脚本。所以此时 jQuery 还没有加载。
您至少可以通过两种方式解决这个问题：
将您的内联脚本放入.js文件并用 a 引用它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). You could仍然像在原始代码中那样包含它，但是 jQuery 只会执行回调立即地，这没有实际区别。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
