筆記一下 : script 中的 defer 屬性及 onload 的搭配

HTML5 中的 <script> 有新增 async 及 defer 屬性,都是屬於非同步載入 javascript。應該很多教學都有說明兩者的不同。

尤其在行動裝置中,如果載入大量的 javascript 難免會讓畫面等很久才會 render,因此可以使用 async 或 defer 來改善。

但我們常常用的 jQuery 其實很肥大的,如果用了 defer 屬性想要改善 render 速度,那可能要搭配 onload 屬性了。

例如

<script src="jquery.js" defer onload="myfunc"></script>
<script>
function myfunc() {
    alert( $('#id').value());
}
</script>

要這麼做的原因是,我們不曉得 jquery.js 何時會被載入,若一開始就用 $(document).ready() 要來處理事情,那就會得到 error.

真是太久沒碰前端了 🙁

發佈留言