Calling function after .load (Jquery)

jquery function load

38281 просмотра

3 ответа

Having a little difficulty getting a function to call after a .load:


The page loads, but the functions don't fire:

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

I've attempted to combine them so that the 2nd functions are called after .load (after doing some searching on this site and looking at given answers/examples) but nothing seems to work properly.


Автор: Matt Источник Размещён: 12.11.2019 09:56

Ответы (3)

30 плюса


To run some code after a .load() finishes, you will need to put the code in a completion function for the .load(). The load operation is asynchronous so the load function starts the loading of the content and then immediately returns and your JS execution continues (before the load has completed). So, if you're trying to operate on the newly loaded content, it won't be there yet.

As your code is written now, you have two blocks of code that both run when the original HTML document is ready. The first block starts a .load() operation. The second operation expects the .load() to be done already, but it has not yet completed so the content from the .load() operation is not yet available.

That's why .load() takes a completion function as an argument. That's a function that will be called when the load has completed. See the relevant jQuery .load() doc for more info. Here's what your code would look like with a completion 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
Автор: jfriend00 Размещён: 27.03.2012 11:19

1 плюс

Your first point of reference should always be the jQuery API, here's what the API page on .load() tells you about the parameters the load function takes:

.load( handler(eventObject) )

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

In this case, you're passing $(this).attr('rel') as the eventData, so you add your event handler after that:

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

In your second block of code, you're telling jQuery to execute it when your body loads, not when you load more into your site. You need to execute it specifically, so change the start of that function to:

function onNewMainContent {  // new
  var $container = $('#container');
      itemSelector: '.box',
  // ...
Автор: Tom McKenzie Размещён: 27.03.2012 11:29

1 плюс

you can also use bootstrap loading button to trigger the .load() and the function after .load()


<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>


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

    var $this = $(this);

    $("#container").load("/showemails.aspx?page=1 #container", function() {

     return false;
Автор: gladiesobmerga Размещён: 24.10.2017 10:57
Вопросы из категории :