función de llamada después de .load (Jquery)

Question

Tener un poco de dificultad para conseguir una función para llamar después de un .load:

$(function(){ 
    $('a.pageFetcher').click(function(){ 
     $('#main').load($(this).attr('rel')); 
    }); 
}); 

Las cargas de la página, pero las funciones no hacer fuego:

$(function(){ 
    var $container = $('#container'); 
    $container.imagesLoaded(function(){ 
     $container.masonry({ 
      itemSelector: '.box', 
    }); 
}); 
$container.infinitescroll({ 
    navSelector : '#page-nav', 
    nextSelector : '#page-nav a', 
    itemSelector : '.box', 
    loading: { 
     finishedMsg: 'Nothing else to load.', 
     img: 'http://i.imgur.com/6RMhx.gif' 
    } 
}, 
function(newElements) { 
    $.superbox.settings = { 
     closeTxt: "Close this", 
     loadTxt: "Loading your selection", 
     nextTxt: "Next item", 
     prevTxt: "Previous item" 
    }; 
    $.superbox(); 
    var $newElems = $(newElements).css({ opacity: 0 }); 
    $newElems.imagesLoaded(function(){ 
     $newElems.animate({ opacity: 1 }); 
     $container.masonry('appended', $newElems, true); 
    }); 
} 
); 
}); 

Intenté combinarlos para que las 2das funciones se llamen después de .load (después de hacer algunas búsquedas en este sitio y ver las respuestas dadas/ejemplos) pero nada parece funcionar correctamente.

Sugerencias?

Answer 1

Para ejecutar un código después de que finalice un .load(), tendrá que poner el código en una función de finalización para el .load(). La operación de carga es asincrónica, por lo que la función de carga inicia la carga del contenido y luego regresa inmediatamente y la ejecución de JS continúa (antes de que la carga se haya completado). Por lo tanto, si intentas operar el contenido recién cargado, aún no estará allí.

Como su código está escrito ahora, tiene dos bloques de código que se ejecutan cuando el documento HTML original está listo. El primer bloque inicia una operación .load(). La segunda operación espera que el .load() ya esté hecho, pero aún no se ha completado, por lo que el contenido de la operación .load() aún no está disponible.

Es por eso que .load() toma una función de finalización como argumento. Esa es una función que se llamará cuando la carga se haya completado. Ver the relevant jQuery .load() doc para más información. Así es como se vería su código con una función de finalización.

$(function(){ 
    $('a.pageFetcher').click(function(){ 
     $('#main').load($(this).attr('rel'), function() { 
      // put the code here that you want to run when the .load() 
      // has completed and the content is available 
      // Or, you can call a function from here 
     }); 
     // the .load() operation has not completed here yet 
     // it has just been started 
    }); 
}); 

Answer 2

Su primer punto de referencia debe ser siempre el jQuery API, aquí es lo que el API page on .load() te dice acerca de los parámetros de la función de carga se lleva a:

.load (manejador (eventObject))

.load ([eventData], handler (eventObject))

En este caso, estás pasando $(this).attr('rel') como EventData, por lo que se agrega el controlador de eventos después de que:

$('#main').load($(this).attr('rel'), onNewMainContent); 

En el segundo bloque de código, usted está diciendo a jQuery para ejecutarlo cuando su cuerpo cargas, no cuando se cargan más en tu sitio. Es necesario para ejecutarlo en concreto, por lo que cambiar el inicio de esa función a:

function onNewMainContent { // new 
    var $container = $('#container'); 
    $container.imagesLoaded(function(){ 
    $container.masonry({ 
     itemSelector: '.box', 
    // ... 

Answer 3

también puede utilizar el botón de carga de arranque para activar el .load() y la función después de .load()

HTML

<button type="button" class="btn btn-primary btn-lg" id="refresh" data-loading-text="<i class='fa fa-spinner fa-spin '></i>Processing">Reload Emails</button> 

JQUERY

$("#refresh").click(function() { 

    var $this = $(this); 
    $this.button('loading'); 

    $("#container").load("/showemails.aspx?page=1 #container", function() { 
     $("#refresh").button('reset'); 
     }); 

    return false; 
    });