.load (Jquery) 后调用函数 [英] Calling function after .load (Jquery)

问题描述

在 .load 之后调用函数有点困难:

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

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

页面加载，但函数不触发:

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

$(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 ); 
    });
}
);
});

我尝试将它们组合起来，以便在 .load 之后调用第二个函数(在此站点上进行一些搜索并查看给定的答案/示例之后)，但似乎没有任何工作正常.

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.

建议?

推荐答案

要在 .load() 完成后运行一些代码，您需要将代码放在 .load() 的完成函数中代码>.load().加载操作是异步的，因此加载函数开始加载内容，然后立即返回并且您的 JS 执行继续(在加载完成之前).因此，如果您尝试对新加载的内容进行操作，则该内容尚不存在.

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.

现在编写代码时，您有两个代码块，它们都在原始 HTML 文档准备好时运行.第一个块开始一个 .load() 操作.第二个操作期望 .load() 已经完成，但它尚未完成，因此 .load() 操作的内容尚不可用.

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.

这就是 .load() 将完成函数作为参数的原因.这是一个将在加载完成时调用的函数.有关详细信息，请参阅 相关的 jQuery .load() 文档.这是带有完成函数的代码的样子.

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.

$(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
    });
});

这篇关于.load (Jquery) 后调用函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！