jQuery:載入內容

2022/12/28閱讀時間約 2 分鐘

jquery載入內容方式有兩種:

第一種是你網頁內容物件載入正確之後才執行，程式碼如下:

$(document).ready(function(){
　　//內容
});

第二種是全部的網頁內容載入後才執行，程式碼如下:

$(window).load(function() {
　　//內容
});

以下為範例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQUERY</title>
　　<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
　　<script>
　　    $(window).on('load', function() {
    　　    console.log('load');
　　    });
    　　$(document).ready(function() {
        　　console.log( "ready!" );
　　    });
　　</script>
</head>
<body>
</body>
</html>

在這個情況下因為沒有甚麼資源需要讀取

所以第二種的速度會優於第一種

但我自己寫了這幾年以來

大多都是以第一種方式居多

第二種方式比較少用到

以前的編輯器都沒有一些指令與記憶的功能

我都會另外把這些東西複製在某個地方方便複製貼上(這就是這篇文章之前為什麼會出現的原因)

現在編輯器進步很多，基本上是不用這樣做了

但還是簡單分享一下喔

參考資料:

1.https://ithelp.ithome.com.tw/articles/10092601

2.https://blog.miniasp.com/post/2010/07/24/jQuery-ready-vs-load-vs-window-onload-event

林信嘉

留言0

查看全部

發表第一個留言支持創作者！