頁面所有元素載入完成之後執行某個js函式
做專案的時候可能會遇到這種情況:
一個JSP頁面中import了一個目錄檔案(menu.jsp),而且每個頁面的<body>中都定義了onload事件,那麼在此定義window.onload函式的時候可能會不生效或者多個onload之間覆蓋的現象.
有的朋友肯定會說用jQuery的$().ready(function(){}),或者(function(){})這種方式, 其實這個函式和javascript的onload事件是由區別的,那麼來看看他們的區別:
他們的主要的區別有兩點：
-
執行時機
window.onload方法是在網頁中的所有的元素（包括元素的所有關聯檔案）都完全載入到瀏覽器之後才執行。而通過jQuery中的$(document).ready()方法註冊的事件處理程式，只要在DOM完全就緒時，就可以呼叫了，比如一張圖片只要<img>標籤完成，不用等這個圖片載入完成，就可以設定圖片的寬高的屬性或樣式等。 -
$(document).ready()方法可以多次使用而註冊不同的事件處理程式，而window.onload一次只能儲存對一個函式的引用，多次繫結函式只會覆蓋前面的函式。
先來看window.onload方法在一個頁面上註冊兩次會是什麼樣的結果：
Js程式碼
- function one(){
- alert("one");
- }
- function two(){
- alert("two");
- }
- window.onload = two ;
- window.onload = one ;
上面的程式碼執行後，會彈出“one”。
再來看看$(document).ready()方法分兩次呼叫會是什麼結果。Js程式碼
- function one(){
- alert("one");
- }
- function two(){
- alert("two");
- }
- $(document).ready(function(){
- one();
- });
- $(document).ready(function(){
- two();
- });
好了,比較完了,也就是說window.onload和jQuery的方式都無法實現,所以有了下面的實現:
Js程式碼
- var $$ = function(func){
- if (document.addEventListener) {
- window.addEventListener("load", func, false);
- }
- elseif (document.attachEvent) {
- window.attachEvent("onload", func);
- }
- }
- $$(function(){
- show();
- })
$$(function(){...此處加上需要執行的內容...});即可...
相關推薦
頁面所有元素載入完成之後執行某個js函式
做專案的時候可能會遇到這種情況: 一個JSP頁面中import了一個目錄檔案(menu.jsp),而且每個頁面的<body>中都定義了onload事件,那麼在此定義window.onload函式的時候可能會不生效或者多個onload之間覆蓋的現象.
當jsp頁面完全載入完成後執行一個js函式
function openTheIndexPage() { openMyURIWithCid(true, 'root', 'IDX', "iframe/dispatch.jsp?url=tdc/zhk/impctrlobjinf/index/index.jsp", '首頁',
當頁面完全載入完成後執行一個js函式
1、在body中用onload: ? 1 <body onload="myfunction()"> 2、在指令碼中用window.onload: ? 1 2 3 4 5 6 7 8 <script type="text/ja
頁面載入完成之後執行js函式window.onload 和 $().ready(function) 以及 的同級函式詳解
頁面載入完成之後執行js函式window.onload 和 $().ready(function) 以及 <body onload="">的同級函式詳解 1.window.onlo
在HTML頁面載入完畢後執行某個js
在DOM載入完就可以執行（比window.onload更早）。在同一頁面中可以多次出現.ready() 兩者主要區別：Window.onload=function (){}: 當一個文件完全下載到瀏覽器中時，才會觸發window.onload事件。這意味著頁面上的全部元素對js而言都是可以操
HTML頁面載入完畢後執行某個js
1、js方法： <script type="text/javascript"> window.onload=function(){ alert("html頁面載入完成後一"); } </script> 2、jQuery方法：（需要引用j
兩種方法實現在HTML頁面載入完畢後執行某個js：
Js方法：<script type=”text/javascript”> window.onload=function (){ var userName=”xiaoming”; alert(userName); } </script&
最佳實踐--Spring容器初始化完成之後執行某個方法
在做javaweb專案的時候，當用戶訪問的時候需要從資料庫載入資料，現在要在容器初始化完成之後直接把資料放入快取，當用戶訪問的時候提高速度。 查閱相關spring文件，找到了一個最佳實踐（best p
怎樣在jsp頁面載入時首先執行某個js
假如我們再載入登入頁面時，當載入完成頁面時，把游標指定在使用者名稱那裡 如下所示 一般有兩種做法 1 此方法是游標停留在使用者名稱上 function init(){ var ctrl=docum
利用Promise實現資料多個請求載入完成時執行某個方法
在實際開發中常常有些業務的資料是來自多個介面的，因為ajax是非同步，這樣就導致我們需要判斷是否請求到了資料然後在做其他的邏輯，在Promise沒有出現之前，通常我們的解決方法是，第一粗暴的改非同步為同步，但這樣會造成阻塞，非同步好像又失去了意義，第二也就是大家常用的解決辦法
如何在背景圖片載入完成之後顯示頁面內容
首先後去後端資料，看看需要載入什麼圖片，共幾個圖片 for (var i = 0; i < that.vClassList.length; i++) { if(that.vClassList[i].msgTypeCode=='18
Vue.js 關於頁面載入完成後執行一個方法的問題
首先我們會想著在mounted或者created裡面加入想要執行的方法，但是有的時候會遇到在你執行這個方法的時候，頁面還並沒有被渲染完成，所以就會出現這個方法在匹配頁面標籤報錯的情況。 解決思路： 1.通過子頁面呼叫父頁面的方法，因為在子頁面開始渲染的時候，你的父頁面肯定
頁面載入完成後執行JS的5種方式
在js和jquery使用中，經常使用到頁面載入完成後執行某一方法。通過整理，大概是五種方式。 1.jQuery的$( function(){} ); 2.jQuery的$(document).rea
selenium之如何等待頁面元素載入完成
webdriver中我們用兩種方式進行等待：明確的等待和隱性的等待。 明確的等待 明確的等待是指在程式碼進行下一步操作之前等待某一個條件的發生。最不好的情況是使用Thread.sleep()去設定一段確認的時間去等待。但為什麼說最不好呢？因為一個元素的載入時
selenium webdriver（Appium）如何等待頁面元素載入完成
selenium webdriver學習（十一）------------如何等待頁面元素載入完成 web的自動化測試中，我們經常會遇到這樣一種情況：當我們的程式執行時需要頁面某個元素，而此時這個元素還未載入完成，這時我們的程式就會報錯。怎麼辦？等待。等待元素出現後再進行
selenium webdriver學習（十一）-怎麼等待頁面元素載入完成
selenium webdriver學習（十一）------------如何等待頁面元素載入完成web的自動化測試中，我們經常會遇到這樣一種情況：當我們的程式執行時需要頁面某個元素，而此時這個元素還未載入完成，這時我們的程式就會報錯。怎麼辦？等待。等待元素出現後再進行對這個
JS實現頁面載入完成之後自動重新整理一次
先貼出程式碼，如果有興趣看我解題思路的可以看下，沒興趣的直接拿走用，節省時間。 window.onload = function(){var url=document.location.href; //獲取瀏覽器訪問欄裡的地址
WebDriver_Java（等待頁面元素載入完成）
web的自動化測試中，我們經常會遇到這樣一種情況：當我們的程式執行時需要頁面某個元素，而此時這個元素還未載入完成，這時我們的程式就會報錯。怎麼辦？等待。等待元素出現後再進行對這個元素的操作。 在selenium-webdriver中我們用兩種方式進行等待：明確的等待和隱性的
jquery DOM載入完成之後立即執行js事件
jquery DOM載入完成之後立即執行js事件 當前臺js事件比如for迴圈本該執行多次但只執行一次時請嘗試將for迴圈放在該ready裡面。 $(document).ready(function
jquery載入頁面的方法(頁面載入完成就執行)
1、$(function(){ $("#a").click(function(){ //adding your code here }); }); 2、$(document).ready(function(){ $("#a").click(f