JS中onload方法,JQ中的load,ready方法
阿新 • • 發佈:2019-04-16
例如 如果 function 圖片加載 窗口 相同 內容 放置 location
JS中的 onload
屬性:網頁中所有的內容加載完畢後(包括圖片)才能執行;
頁面中只能有一個onload
window.onload = function() { …… };
JQ的 ready()
屬性:網頁中所有DOM結構繪制完畢後就執行,可能DOM元素關聯的東西並沒有加載完(例如圖片);
頁面中可以寫用多個
$(document).ready(function() { …… });
簡寫:$(function(){……})
JQ的 load()
屬性:這個方法會等到頁面所有內容加載完畢後才會觸發,並且同時沒有onload事件屬性的缺點。
註意:《鋒利的Jquery》中4.1.1中的描述如下:
另外需要註意一點,由於在$(document).ready()方法內註冊的事件,只要DOM就緒就會被執行,因此可能此時元素的關聯文件未下載完。例如與圖片有關的HTML下載完畢,並且已經解析為DOM樹了,但很可能圖片還未加載完畢,所有例如圖片的高度和寬度這樣的屬性此時不一定有效。要解決這個問題,可以使用jQuery中另一個頁面加載的方法--load()方法。load()方法會在元素的onload事件中綁定一個處理函數。如果處理函數綁定給window對象,則會在所有內容(包括窗口,框架,對象和圖像等)加載完畢後觸發,如果處理函數綁定在元素上,則會在元素的內容加載完畢後觸發。
$(window).load(function() { …… });
// 此處用法和作用於window.onload = function(){……} 方法相同
補充說明:JQ中有兩個load()方法,一個是JQuery事件load()方法,一個是JQuery Ajax load()方法.
JQuery事件load()方法:
頁面中只能有一個
$("img").load(function() { console.log("圖像已加載") //在圖片加載完成後打印提示內容 });
JQuery Ajax load()方法:
load() 方法通過 AJAX 請求從服務器加載數據,並把返回的數據放置到指定的元素中。
$("button").click(function() { $("div").load("demo_ajax_load.txt"); //通過AJAX請求來改變div元素的文本 });
相關:
function clickReload() { window.location.reload() } //調用次函數 瀏覽器將重新加載(刷新)當前頁面
JS中onload方法,JQ中的load,ready方法