Latest web development tutorials
 

jQuery pagebeforeload Event

< jQuery Mobile Events

Example

Alert some text before a load request is made:

$(document).on("pagebeforeload",function(){
  alert("pagebeforeload event fired!");
});
Try it Yourself »

Definition and Usage

The pagebeforeload event was deprecated in jQuery version 1.4.0. Use the pagecontainerbeforeload event instead.

The pagebeforeload event is triggered before any load request is made.

Related events:

  • pageload - triggered after the page has been successfully loaded and inserted into the DOM
  • pageloadfailed - triggered if the page load request fails

Note: These events are used for external pages - Whenever an external page is loaded into the DOM, 2 events are fired. The first is pagebeforeload. The 2nd event will either be pageload or pageloadfailed.

Syntax

$("document").on("pagebeforeload",function(event,data){...})

Parameter Description
function(event,data) Required. Specifies the function to run when the pagebeforeload event occurs.

The function has two optional parameters:

The event object - which can contain any jQuery event properties (e.g. event.target, event.type, etc.) See jQuery Events Reference for more information

The data object - contains the following:

  • url (string) - contains the absolute or relative URL of the page (that was sent to $.mobile.loadPage())
  • absUrl (string) - contains the absolute reference of the URL
  • dataUrl (string) - contains the URL of the browser's location
  • deferred (object) - contains resolve() or reject()
  • options (object) - contains the options that were sent to $.mobile.loadPage()
Note: You can manually handle the load request by calling the event.preventDefault() on the event object and resolve() or reject() on the deferred object contained in the data object.

Try it Yourself - Examples

A demonstration of related events
A demonstration of pageload and pageloadfailed.

The event object
Using the event.type property to return the triggered event type.

The data object
Using the data.url to return the URL of the external page.

< jQuery Mobile Events