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

jQuery:載入內容

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
分享至
成為作者繼續創作的動力吧!
© 2024 vocus All rights reserved.