所有ajax執行完且頁面載入完判斷--ajaxStop

阿新 • • 發佈：2019-01-13

jquery ajax&load 方法導致 js效果不顯示或顯示後由於載入後ajax 重新佈局頁面導致效果錯誤。

解決思路：需要在ajax get post 或 load 等執行完後再去執行方法就不會由於他們沒執行完導致的最終錯誤。

那麼首先看load 方法定義：

jQuery ajax - load() 方法

jQuery Ajax 參考手冊
例項

使用 AJAX 請求來改變 div 元素的文字：

$("button").click(function(){
  $("div").load('demo_ajax_load.txt');
});

親自試一試

您可以在頁面底部找到更多 TIY 例項
定義和用法

load() 方法通過 AJAX 請求從伺服器載入資料，並把返回的資料放置到指定的元素中。

註釋：還存在一個名為 load 的 jQuery 事件方法。呼叫哪個，取決於引數。
語法

load(url,data,function(response,status,xhr))

引數 	描述
url 	規定要將請求傳送到哪個 URL。
data 	可選。規定連同請求傳送到伺服器的資料。
function(response,status,xhr) 	

可選。規定當請求完成時執行的函式。

額外的引數：

    response - 包含來自請求的結果資料
    status - 包含請求的狀態（"success", "notmodified", "error", "timeout" 或 "parsererror"）
    xhr - 包含 XMLHttpRequest 物件

詳細說明

該方法是最簡單的從伺服器獲取資料的方法。它幾乎與 $.get(url, data, success) 等價，不同的是它不是全域性函式，並且它擁有隱式的回撥函式。當偵測到成功的響應時（比如，當 textStatus 為 "success" 或 "notmodified" 時），.load() 將匹配元素的 HTML 內容設定為返回的資料。這意味著該方法的大多數使用會非常簡單：

$("#result").load("ajax/test.html");

如果提供回撥函式，則會在執行 post-processing 之後執行該函式：

$("#result").load("ajax/test.html", function() {
  alert("Load was performed.");
});

上面的兩個例子中，如果當前文件不包含 "result" ID，則不會執行 .load() 方法。

如果提供的資料是物件，則使用 POST 方法；否則使用 GET 方法。
載入頁面片段

.load() 方法，與 $.get() 不同，允許我們規定要插入的遠端文件的某個部分。這一點是通過 url 引數的特殊語法實現的。如果該字串中包含一個或多個空格，緊接第一個空格的字串則是決定所載入內容的 jQuery 選擇器。

我們可以修改上面的例子，這樣就可以使用所獲得文件的某部分：

$("#result").load("ajax/test.html #container");

如果執行該方法，則會取回 ajax/test.html 的內容，不過然後，jQuery 會解析被返回的文件，來查詢帶有容器 ID 的元素。該元素，連同其內容，會被插入帶有結果 ID 的元素中，所取回文件的其餘部分會被丟棄。

jQuery 使用瀏覽器的 .innerHTML 屬性來解析被取回的文件，並把它插入當前文件。在此過程中，瀏覽器常會從文件中過濾掉元素，比如 <html>, <title> 或 <head> 元素。結果是，由 .load() 取回的元素可能與由瀏覽器直接取回的文件不完全相同。

註釋：由於瀏覽器安全方面的限制，大多數 "Ajax" 請求遵守同源策略；請求無法從不同的域、子域或協議成功地取回資料。
更多例項
例子 1

載入 feeds.html 檔案內容：

$("#feeds").load("feeds.html");

例子 2

與上面的例項類似，但是以 POST 形式傳送附加引數並在成功時顯示資訊：

$("#feeds").load("feeds.php", {limit: 25}, function(){
  alert("The last 25 entries in the feed have been loaded");
});

例子 3

載入文章側邊欄導航部分至一個無序列表：

HTML 程式碼：

<b>jQuery Links:</b>
<ul id="links"></ul>

jQuery 程式碼：

$("#links").load("/Main_Page #p-Getting-Started li");

發現有個回撥方法，那好啊，我在回撥中寫自己的方法就會在ajax之後執行了。於是乎：

$("#feeds").load("feeds.php", function(){
    fun();
});

但是有個問題，如果是多個呢？每個後面都加？而且還要判斷此方法是否被執行過了。（。。。。。。。。。。）

於是乎：找個jquery自帶的判斷所有結束後再去執行就OK了，於是：

	$("div").ajaxStop(function(){
		if (hash && !isGlobalHash) {
			$("#MfTit"+hash).trigger("click");
			isGlobalHash = true;
		}
	});

定義：

例項

當所有 AJAX 請求完成時，觸發一個提示框：

$("div").ajaxStop(function(){
  alert("所有 AJAX 請求已完成");
});

當然有 stop 就有 start.

所有ajax執行完且頁面載入完判斷--ajaxStop

jquery ajax&load 方法導致 js效果不顯示或顯示後由於載入後ajax 重新佈局頁面導致效果錯誤。解決思路：需要在ajax get post 或 load 等執行完後再去執行方法就不會由於他們沒執行完導致的最終錯誤。那麼首先看load 方法定義：

頁面載入完後立刻執行JS的兩種方法

方式一：window.onload：當一個文件完全下載到瀏覽器中時，才會觸發window.onload事件。這意味著頁面上的全部元素對js而言都是可以操作的，也就是說頁面上的所有元素載入完畢才會執行。這種情況對編寫功能性程式碼非常有利，因為無需考慮載入的次序。window.o

頁面載入完後自動執行一個方法的js程式碼

1、在body中用onload: <body onload="myfunction()"> 2、在指令碼中用window.onlo <script type="text/ja

JS_實現頁面載入完再執行JS程式碼

1 在body中用onload: <body onload="myfunction()"> 2 在指令碼中用window.onload: <script type="text/javascript"> function myfun() { alert("this window

頁面載入完不在頂部

近來專案中用到圖文混排,但是遇到了一個問題便是圖片資料載入完以後不在頂部,而是在最後載入圖片的位置,很是苦惱,在RecyclerView中載入圖片有時候也會遇見這個問題,初步考慮的便是最後載入的圖片獲取到了焦點,從而跳到最後載入的圖片位置,所以用你最上邊的佈局通過呼叫set

從輸入URL到頁面載入完的過程中都發生了什麼事情？

以下是一個大概流程： (1) 瀏覽器獲取輸入的域名www.google.com (2) 瀏覽器向DNS請求解析www.google.com的IP地址 (3) 域名系統DNS解析出百度伺服器的IP地址 (4) 瀏覽器與該伺服器建立TCP連線(預設埠號80) (5)

PHP + JavaScript + Ajax 實現無重新整理頁面載入效果

今天這個實驗的思路就是實現一個無重新整理的頁面載入效果。具體的思路是使用PHP開發後臺，為前臺準備資料，然後使用Ajax技術作為資料的搬運工，將資料從伺服器端拉取到前端，最後使用JavaScript技術將獲取到的資料加工，並顯示在頁面上。資料來源工

在整個頁面都載入完後才執行的操作

在最近做頁面的時候要求將使用者上次的記錄渲染到頁面上....但是所在的文字域偏偏又是最晚才載入進來..... 所以用了 window.onload函式..發現它才是老油條,最後成功解決問題: window.onload=function(){ var te

ajax執行完之後進入error方法體，error方法體內加上alert卻又可以執行

描述下遇到的情況：正常執行完ajax，會進入error方法體，並且彈窗沒有正確關閉奇葩的是，在ajax外加上不存在的方法，雖然網頁控制檯會js報錯，但是卻進入了success的方法體，彈窗正確關閉，但是頁面沒有重新整理看下程式碼： console.log("確

圖片載入完執行的事件

工作中遇到個是關於聊天框的滾屏問題，問題是圖片還沒有載入完滾屏的高度已經出來了，會造成滾屏失效的問題，所以想到等圖片載入完成後再執行下滾屏事件這樣就可以解決了這個問題。程式碼如下： $msgItem.find('img').load(function(e){//$msgItem是聊天

$(function(){})與$(document).ready(function(){})的區別載入完執行事件

document.ready和onload的區別——JavaScript文件載入完成事件頁面載入完成有兩種事件一是ready，表示文件結構已經載入完成（不包含圖片等非文字媒體檔案）二是onload，指示頁面包含圖片等檔案在內的所有元素都載入完成。用jQ的人

頁面用一個遮罩層顯示載入，載入完後隱藏該div

<div id="background" class="background" style="display: none; "></div> <div id="progressBar" class="progressBar" style="display: none; "&

net(c#)在迴圈語句中執行WebBrowser.Navigate();方法,每次迴圈等待網頁載入完後繼續執行的解決方案

最近在寫一個小程式的時候,遇到這樣的需求: 已知一組網頁url地址,想獲取每一個網頁的html,實際上就是想利用迴圈語句裡面使用WebBrowser來載入每一個網頁,然後獲取他們的html, 要實現這個功能,想想應該是件很簡單

spring 專案載入完立刻執行

我的目的是想在專案載入完畢之後,需要進行一些初始化的動作,比如從資料庫查詢資料,快取起來. 找到了三種方式: 第一種方式寫一個類，實現BeanPostProcessor，這個介面有兩個方法（1）postProcessBeforeInitializ

原生ajax同步請求等待Ajax執行完返回引數再往下執行使用ajax接收到的引數

業務中的需求是ajax請求得到返回之後再在ajax請求外利用返回值處理業務,先在ajax請求外定義var型別變數,var在全域性範圍有效,再設定async為false,設定ajax請求為同步請求,再sucess方法中將返回值賦給var變數,再ajax函式外就可以用了

Vue 如何在頁面渲染完後去操作dom，而且只執行一次

在介面請求成功的回撥裡使用 this.$nextTick(() =>{ // 在這裡面去獲取DOM })。在mounted生命週期，元件掛載成功，但還未渲染，自然獲取不到相關的DOM節點。看你資料好像不是前端，舉個更簡單的例子，你在html中，把 consol

適應所有巢狀自動滾動bug。ListView巢狀在ScrollView中、Lv載入完資料之後Sv自動滾動

Notice Notice 最近使用RecyclerView巢狀RecyclerView也出現了類似的問題，最後使用下面的方法三也解決了。問題第一次進入介面請求資料成功

載入完頁面後，用js對介面控制元件進行隱藏

方法1：js寫在在head裡的$(function(){});函式裡，會在頁面完全顯示後，再執行此函式，對控制元件進行隱藏，會先看到控制元件，然後再對控制元件進行隱藏。不推薦此方法。方法2：js寫在</body><script type="text/java

js中如何控制所有頁面載入完成後，再執行某些方法

做頁面時經常會遇到當前頁面載入完成後，執行某些初始化工作。這時候就要知道如何判斷頁面（包括IFRAME）已經載入完成，程式碼如下： <script language="javascript"> document.onreadystatechange

Spring MVC框架下將數據庫內容前臺頁面顯示完整版【獲取數據庫人員參與的事件列表】

XML 獲取 utf-8 字段 eas jsp r.java 增刪 otp 1.書寫jsp頁面包括要顯示的內容【people.jsp】 <!-- 此處包括三個方面內容： 1.包含文本輸入框查詢按鈕查詢結果顯示位置（p

所有ajax執行完且頁面載入完判斷--ajaxStop

例項

相關推薦