jQuery Mobile - Eventos de carga de página

Descripción

Se activa cuando la página se ha inicializado mediante dos tipos de eventos:

El evento pagebeforecreate se activa cuando la página está a punto de inicializarse.
El evento pagecreate se activa cuando se crea la página.

Descripción

Se activa cuando las páginas externas se cargan en el DOM utilizando los siguientes tipos de eventos:

El evento pagecontainerbeforeload se activa antes de que se cargue la página.
El evento pagecontainerload se activa cuando la página se ha cargado y colocado en el DOM.
El evento pagecontainerloadfailed se activa cuando la página no se carga y muestra el mensaje "Error al cargar la página".

Ejemplo

El siguiente ejemplo describe el uso de eventos de carga de página en jQuery Mobile Framework.

<!DOCTYPE html>
   <head>
      <title>Page Load Events</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
      
      <script>
         $(document).on("pagecontainerload",function(event,data) {
            alert("The page has been loaded: " + data.url);
         });
         $(document).on("pagecontainerloadfailed",function(event,data) {
            alert("Sorry, the page has been failed to load!!!");
         });
      </script>
   </head>
   
   <body>
      <div data-role = "page" id = "page1">
         <div data-role = "header">
            <h2>Header</h2>
         </div>

         <div data-role = "main" class = "ui-content">
            <a href = "mypage.html">My Page</a>
         </div>

         <div data-role = "footer">
            <h2>Footer</h2>
         </div>
      
      </div>
   </body>
</html>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código html anterior como jqm_page_load_event.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/jqm_page_load_event.html y se mostrará el siguiente resultado.

↰ Previous page