$(window).load(function() {})和$(document).ready(function(){})的區別

時間 2021-08-14

標籤 javascript html java jquery dom ide 函數 spa htm 圖片欄目 Windows 简体版

原文原文鏈接

在我之前的開發中，通常用到javascript，我都是採用jquery的模式，也就是大多數時候，第一行寫的是：

$(document).ready(function(){

...

});

這個時候，不必定要等全部的js和圖片加載完畢，就能夠執行一些方法，不過有些時候，必需要等全部的

元素都加載完畢，才能夠執行一些方法的時候，好比說，部分圖片或者什麼其餘方面尚未加載好，這個時候，點擊某些按鈕，會致使出現意外的狀況，這個時候，就

須要用到:

$(window).load(function() {

$("#btn-upload").click(function(){ //好比說：
uploadPhotos();
});

});

下面是轉載的內容，

用$(window).load(function(){...})而不用body.onload()的幾個理由

首先它們都是在頁面全部元素(包括html標籤以及引用到得全部圖片,Flash等媒體)加載完畢後執行的,這是它們的共同點.javascript

不用body.Onload()理由1：html

若是咱們想同時加載多個函數,咱們必須這樣寫java

<body onload="fn1(),fn2()"></body>看起來極其醜陋,若是用$(window).load()咱們能夠這樣加載多個函數jquery

$(window).load(function() {
            alert("hello,我是jQuery!");
  });
$(window).load(function() {
   alert("hello,我也是jQuery");
});dom

這樣寫它會從上往下執行這兩個函數,而且看起來漂亮多了.ide

不用body.Onload()理由2：函數

用body.Onload()不可以作到js和html徹底分離,這是一個很嚴重的問題.spa

另外用$(window).load(function(){...})和body.onload()都存在一樣一個問題,由於開始也說到了,它們都須要等到頁面的全部內容htm

加載完畢才執行,可是若是當網速比較慢的時候,加載一個頁面每每須要較長的時間(幾秒到十幾秒不等,甚至更長...),因此咱們常常圖片

會遇到頁面尚未徹底加載完畢而用戶已經在操做頁面了這種狀況,這樣頁面表現出來的效果就跟咱們預期的效果不同了,

因此在這裏我推薦使用$(document).ready(function(){}),或簡寫爲$(function(){})，由於他會在頁面的dom元素加載完畢後就執行,

而無需等到圖片或其餘媒體下載完畢.

可是有時候確實咱們有須要等到頁面的全部東西都加載完後再執行咱們想執行的函數,因此是該使用$(window).load(function(){...})仍是

該使用$(function(){})每每須要結合具體須要而做不一樣的選擇.

最後附上一段在全部DOM元素加載以前執行的jQuery代碼

(function() {
            alert("DOM還沒加載哦!");
        })(jQuery)
  </script>

呵呵,有時候咱們也有這個需求!

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。