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

jquery jquery3.1.1 load

筱均 2017-01-16 11:42:28 ‧ 7400 瀏覽

分享至

最近在試用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，但是可以參考。

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

Sam-物理拳頭系工程師(五段)

iT邦高手 9 級 ‧ 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的做法。
挑一個你喜歡的來用吧！(我喜歡最後一個，最簡潔)

回應 5
分享
檢舉

看更多先前的回應...收起先前的回應...

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以後的版本都不能用了嗎?

Sam-物理拳頭系工程師(五段) iT邦高手 9 級 ‧ 2017-01-16 17:36:43 檢舉

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

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

好的謝謝回復~

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22200 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙