在頁面加載後運行 jQuery
JavaScript 庫提供了數種在 DOM 準備好後執行 Script 的方法。
以下教程 : 將詳細概述實現這一目標的方法。
在純 JavaScript 中，檢測完全加載頁面的標準方法是使用 加載事件處理程序。
這加載事件 表示網頁上的所有資源都已加載完畢。
可以用 window.onload 在 JavaScript 中。
window.onload = function() {
alert('Page is
loaded');
};
以下代碼使用 addEventListener() 監聽的方法 load 事件來檢測完全加載的頁面。
這相當於上面的代碼。
window.addEventListener("load", function() {
alert('Page is loaded');
});
當你撰寫小工具需要掛載 jQuery 時，
為何要等頁面上的所有資源都已加載完畢，才執行有 jQuery 程序，因為、 jQuery 函數庫是以預後載入，即使你將它加在 <head> 裡也不會優先運行，所以要等 .. 等 ..
判斷 jQuery 函數庫是否已有載入 >> if (typeof jQuery == 'undefined')
若沒有，創建一個 <script> 載入 jQuery 函數庫，等 jQuery 完全運行後，
window.addEventListener("load", (e) =>{ 再執行 jQuery 程序代碼 }
。⭐。之前常看到有些小工具要安裝時，需要使用者判斷是否要手動掛載 jQuery，這樣實在不太友善， 經過測試後，只要將以上程序碼放在前面，就會自動偵測掛載 jQuery 函數庫，你就不用考慮是否有載入 jQuery 囉 !!
判斷 jQuery 函數庫是否已有載入 >> if (typeof jQuery == 'undefined')
若沒有，創建一個 <script> 載入 jQuery 函數庫，等 jQuery 完全運行後，
window.addEventListener("load", (e) =>{ 再執行 jQuery 程序代碼 }
if (typeof jQuery == 'undefined') {
var load_js = document.createElement('script');
load_js.setAttribute("type", "text/javascript")
load_js.src= "https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js";
document.head.appendChild(load_js);
}
window.addEventListener("load", (e) =>{
alert(`jQ版本 : ${$().jquery}`);
jQuery(function($) { // 你要運行的事件處理程序 });
});
var load_js = document.createElement('script');
load_js.setAttribute("type", "text/javascript")
load_js.src= "https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js";
document.head.appendChild(load_js);
}
window.addEventListener("load", (e) =>{
alert(`jQ版本 : ${$().jquery}`);
jQuery(function($) { // 你要運行的事件處理程序 });
});
。⭐。之前常看到有些小工具要安裝時，需要使用者判斷是否要手動掛載 jQuery，這樣實在不太友善， 經過測試後，只要將以上程序碼放在前面，就會自動偵測掛載 jQuery 函數庫，你就不用考慮是否有載入 jQuery 囉 !!
協助架設 Blogger / 網站 服務
舊 
張貼留言