如何推迟内联Javascript？ [英] How to defer inline Javascript?
问题描述
我有以下html代码：
<！DOCTYPE html>
< html lang =en>
< head>
< meta charset =UTF-8>
< title>文档< / title>
< script src =https://cdn.jsdelivr.net/blazy/1.8.2/blazy.min.jsdefer>< / script>
< script src =https://code.jquery.com/jquery-2.1.4.min.jsintegrity =sha256-8WqyJLuWKRBVhxXIL1jBDD7SDxU936oZkCnxQbWwJVw =crossorigin =anonymousdefer>< / script>
< script src =https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/js/lightbox.min.jsdefer>< / script>
< script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.jsintegrity =sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txacrossorigin =anonymousdefer>< /脚本>
<！ - 26 dec flexslider js - >
< script src =https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/jquery.flexslider.min.jsdefer>< / script>
< script defer>
（函数（$）{
$（document）.ready（function（）{
//使用b-lazy插件，lightbox插件和flexslider
做些事情} ）;
}）（jQuery）;
< / script>
< / head>
< body>
< / body>
< / html>
我得到一个错误，说jQuery没有定义。现在，即使我从我的内联JS代码中删除延迟，它说jQuery是未定义的。出于某种原因，我必须保持jQuery插件的头脑，并保持我的JS代码内联。我的问题是：
$ b
-
为什么在
defer 属性存在吗？ - 有没有一种方法可以模仿我的内嵌Javascript代码的推迟行为？如果需要，我可以将它放在body标签的末尾。 脚本按照它们指定的顺序加载，但由于它们都具有
-
将内联脚本放在
.js文件中，并使用src属性或 -
等待文档和延迟脚本加载，如下所示：
<脚本>
window.addEventListener（'DOMContentLoaded'，function（）{
（function（$）{
$（document）.ready（function（）{
// do something with b-lazy插件，lightbox插件，然后使用flexslider
}）;
}）（jQuery）;
}）;
< / script>
Why doesn't inline Javascript code get deferred when
deferattribute is present on it?Is there a way to imitate the defer behavior on my inline Javascript code? I can put that at the end of body tag if required.
Put your inline script in a
.jsfile and reference it with asrcattribute, orWait for the document and the deferred scripts to be loaded, as follows:
<script> window.addEventListener('DOMContentLoaded', function() { (function($) { $(document).ready(function() { //do something with b-lazy plugin, lightbox plugin and then with flexslider }); })(jQuery); }); </script>
defer 属性，它们都在文档本身加载后执行。因为 defer 对脚本标签没有影响，除非它们也有 src 标记，执行的第一个脚本是内联脚本。所以当时jQuery尚未加载。 您至少可以通过以下两种方式解决这个问题：
注意：在后一种情况下 $（document）.ready（function（）实际上是不必要的，因为那时文档已经准备好了 - 但jQuery很好，并且会立即执行回调。
I have the following html code:
<!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>
I get an error, saying jQuery is not defined. Now even if I remove defer from my inline JS code, it says jQuery is undefined. For some reason I have to keep the jQuery plugins in the head and keep my JS code inline. My question is:
The scripts load in the order they are specified, but since they all have the defer attribute, they all execute after the document itself has been loaded. As defer has no effect on script tags unless they also have the src tag, the first script that gets executed is your inline script. So at that time jQuery is not loaded yet.
You can solve this in at least two ways:
NB: in the latter case $(document).ready(function() is really unnecessary, as at that time the document is already ready -- but jQuery is nice and will execute the callback immediately.
这篇关于如何推迟内联Javascript？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
