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

時間 2019-11-09

標籤 window load function 不用 body.onload body onload 幾個理由欄目 Windows 简体版

原文原文鏈接

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

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

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

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

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

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

不用body.Onload()理由2：post

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

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

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

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

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

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

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

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

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

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

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

完畢!

相關標籤/搜索

每日一句

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