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

问题描述

  $（function（）{
 $（'a.pageFetcher'）。click（function（）{
 $（'＃main'）。load（$（this）.attr（'rel'））; 
}）; 
}）; 
  

加载页面，但函数不会触发：

  $（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 '，
 img：'http://i.imgur.com/6RMhx.gif'
} 
}，
函数（newElements）{
 $ .superbox.settings = {
 closeTxt：关闭这个，
 loadTxt：加载您的选择，
 nextTxt：下一个项目，
 prevTxt：上一个项目 
 $; 
 $ .superbox（）; 
 var $ newElems = $（newElements）.css（{opacity：0}）; 
 $ newElems.imagesLoaded（function（） {
 $ newElems .animate（{opacity：1}）; 
 $ container.masonry（'added'，$ newElems，true）; 
}）; 
} 
）; 
}）; 
  

我试图将它们结合起来，这样第二个函数在.load之后被调用在这个网站上搜索，看看给出的答案/例子），但没有任何东西似乎正常工作。

建议？

.load（）完成后运行一些代码，您需要将代码放入 .load（）。加载操作是异步的，所以加载函数开始加载内容，然后立即返回并继续JS执行（在加载完成之前）。因此，如果您尝试对新加载的内容进行操作，它将不会到达那里。

由于您的代码现在已写入，因此您有两块在原始HTML文档准备就绪时运行的代码。第一个块启动 .load（）操作。第二个操作期望已经完成了 .load（），但它还没有完成，所以来自 .load（）
$ b

这就是为什么 .load（）将完成函数作为一个论点。这是一个将在负载完成时调用的函数。有关更多信息，请参阅相关的jQuery .load（）文档。这是你的代码看起来像一个完成函数。

  $（function（）{
 $（'a （）函数（）函数（）{
 $（'＃main'）。load（$（this）.attr（'rel'），function（）{
 //把代码在.load（）
 //完成并且内容可用
 //时，您希望运行它或者，您可以从这里调用一个函数
}）; 
 // .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 ); 
    });
}
);
});

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.

Suggestions?

解决方案

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.

$(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屋！