iT邦幫忙

0

jquery3.1.1環境下的on('load')問題

最近在試用fancybox3時發現一個問題
在jquery3.1.1的環境下,下方的程式碼是沒有作用的

$(window).on('load',function(){

	// 程式在3.1.1環境中無法作用

});

下面是範例:
https://jsfiddle.net/anita8004/9o2vuz2r/

請問有高人能幫忙解答嗎?
如果load不能用,還有什麼替代方案呢?
以後在jquery3都不能用on('load',function(){});了是嗎?

fillano iT邦超人 1 級 ‧ 2017-01-16 14:04:41 檢舉
如果你要做的是就是:
$('.app').html('+++');

那你以前的做法恐怕都是有問題的。因為window載入時,網頁內容可能還沒跑完,做上面這個動作沒辦法保證可以完成。而且對jQuery來說,他只是沒找到東西,所以也不會有錯誤產生。

正確的請參考Sam大的回答。
筱均 iT邦新手 5 級 ‧ 2017-01-16 16:23:44 檢舉
謝謝回復!
$('.app').html('+++');只是範例,
通常我會這樣做:
$(window).on('load',function(){
$("body").addClass('loaded');
});
來做load完成後的效果,
如果是加class的話,還會有找不到的問題嗎?
fillano iT邦超人 1 級 ‧ 2017-01-17 11:37:56 檢舉
我錯了,回頭看了一下DOM 3跟HTML5,看起來window的load事件是等到所有資源載入後才會觸發。

不過在MDN的這個網址:https://developer.mozilla.org/en-US/docs/Web/API/Window#Event_handlers
底下的onload下,有一段說明:
Called after all resources and the DOM are fully loaded. WILL NOT get called when the page is loaded from cache, such as with back button.

點進去看並沒有這段文字,有點怪XD,但是可以參考。

1 個回答

5
Samと可樂快跑
iT邦研究生 2 級 ‧ 2017-01-16 11:59:39
最佳解答

要處理onload其實有以下幾種方式:

jQuery().ready(function(){

    $('.app').html('+++');

});
$().ready(function(){

    $('.app').html('+++');

});
$(document).ready(function(){

    $('.app').html('+++');

});
$(window).ready(function(){

    $('.app').html('+++');

});
$(function(){
  
	$('.app').html('+++'); //這樣子就可以使用了

});

基本上我沒有使用$(window)的習慣
原本jquery就有document ready的做法。
以上的全部都是ready的做法。
挑一個你喜歡的來用吧!(我喜歡最後一個,最簡潔)

看更多先前的回應...收起先前的回應...
fillano iT邦超人 1 級 ‧ 2017-01-16 14:00:00 檢舉

我也是愛用最後一個。

筱均 iT邦新手 5 級 ‧ 2017-01-16 16:13:39 檢舉

謝謝Sam大的指導,我會再試試看

筱均 iT邦新手 5 級 ‧ 2017-01-16 16:18:42 檢舉

不過我還是想問,
on('load',fn)這個寫法以後在jquery3以後的版本都不能用了嗎?

我沒有使用這個方法所以不是很清楚,
不過既然jquery官方一開始就有針對ready的做法,
自然建議還是使用ready比較好。
因為ready是在所有的頁面都載完之後才開始執行。
不過我個人建議js還是統一放在html之後執行會比較妥當。

筱均 iT邦新手 5 級 ‧ 2017-01-16 21:45:17 檢舉

好的 謝謝回復~

我要發表回答

立即登入回答