點評js異步載入的4種方式_javascript技巧
- WBOY原創
- 2016-05-16 15:24:101252瀏覽
js非同步載入的4種方式，點評開始。
方案1：$(document).ready
<!DOCTYPE html>
<html>
<head>
<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
alert("加载完成！");
});
</script>
</head>
<body>
<img src="http://images.cnitblog.com/i/121863/201405/222202573569862.jpg" />
</body>
</html>
點評：
1、需要引用jquery
2、相容於所有瀏覽器。
方案2：<script>標籤的async="async"屬性</script><script>標籤的async="async"屬性</script>
<script>標籤的async="async"屬性</script>
<script> </script>
async的定義與用法(是HTML5的屬性)async 屬性規定一旦腳本可用，則會非同步執行。
<script type="text/javascript" src="xxxxxxx.js" async="async"></script>範例：
點評：
1、HTML5中新增的屬性，Chrome、FF、IE9&IE9+皆支援（IE6~8不支援）。此外，這種方法不能保證腳本按順序執行。
2、async 屬性僅適用於外部腳本（只有在使用 src 屬性時）。 方案3：
<script>標籤的defer="defer"屬性<p><p><p> defer 屬性規定是否對腳本執行進行延遲，直到頁面載入為止。 <p> 有的 javascript 腳本 document.write 方法來建立目前的文件內容，其他腳本就不一定是了。 <div class="jb51code"> <pre class="brush:js;"> <script type="text/javascript" defer="defer"> alert(document.getElementById("p1").firstChild.nodeValue); </script> </pre>如果您的腳本不會改變文件的內容，可將 defer 屬性加入到 <script> 標籤中，以便加快處理文件的速度。因為瀏覽器知道它將能夠安全地讀取文件的剩餘部分而不用執行腳本，它將推遲對腳本的解釋，直到文件已經顯示給使用者為止。 <p>範例：<strong> <p> <strong>點評：<span style="color: #800000">相容於所有瀏覽器。此外，這種方法可以確保所有設定defer屬性的腳本都按順序執行。 <strong> 方案4：<p>動態建立<script>標籤<div class="jb51code"><pre class="brush:php;toolbar:false"> <!DOCTYPE html> <html> <head> <script type="text/javascript"> (function(){ var s = document.createElement('script'); s.type = 'text/javascript'; s.src = "http://code.jquery.com/jquery-1.7.2.min.js"; var tmp = document.getElementsByTagName('script')[0]; tmp.parentNode.insertBefore(s, tmp); })(); </script> </head> <body> <img src="http://images.cnitblog.com/i/121863/201405/222202573569862.jpg" /> </body> </html> </pre> <p>範例：<strong> <p> <🎜>點評：<🎜>相容於所有瀏覽器。 <🎜> <🎜>以上就是針對js非同步載入的4種方式進行的區分介紹，希望對大家的學習js非同步載入有所幫助。 <🎜></script>陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn