javascript – 如何设置jQuery函数的顺序,以便在另一个完成呈现内容后触发？

2023年11月13日 248次阅读

我正在使用Masonry和Embedly插件来显示嵌入式内容,我已经将一个示例组合在一起
here.

我的jQuery如下

//embedly

    $('.box').find('a').embedly({
      maxWidth: 260,
      wmode: 'transparent',
      method: 'after',
      chars: 50,
      width: 260,
      key:':cd54253e69944ae18ad5ece38b4d0e1e' //temporal
    });


//masonry

   var $container =  $('#main-container');

    $container.imagesLoaded( function(){
        $container.masonry({
          itemSelector: '.box',
          isAnimated: true,
          isFitWidth: true
      });
    });

看起来Masonry插件首先加载并导致重叠问题(它们只在你调整结果窗口大小时才能正确显示)我已经读过,我可以使用回调函数或重新组合Masonry一旦嵌入完成渲染内容,但我不知道知道怎么做.你能帮助我吗？有没有其他解决方案来解决这个问题？

最佳答案 你有一个异步计时问题.在内容有机会加载之前,将触发砌体布局代码.

所以你要做的就是等到你的内容加载完毕后再打电话给砌体.您可能会想要使用超时,这会导致竞争条件.

理想情况下,嵌入式将具有更好的API并以ajax调用的方式返回某种延迟的promise对象.不幸的是,似乎没有什么东西可以清洁,所以我们必须做几个手工.

如果您定义成功：回调,那么显然您必须自己插入内容.

幸运的是,embedly()在加载并显示内容之后触发它自己的事件,您可以将回调绑定到该事件.

可能有许多更优雅的方法来实现这一点,但是出于使用丑陋的全局的简单示例的目的,我们跟踪加载的内容片段的数量.每次嵌入事件触发表明已加载一段内容时,我们递增计数器.一旦我们达到匹配元素的总数,我们就知道所有内容都已加载,我们称之为砌体.

虽然它不漂亮,但它的工作原理是：http://jsfiddle.net/sJ5vc/

    //embedly
var matches = $('.box').find('a').length;
var loaded = 0;

// we call this from the embedly callback after all 
// content has been loaded.
function callMasonry() {
    var $container = $('#main-container');

    $container.imagesLoaded(function() {
        $container.masonry({
            itemSelector: '.box',
            isAnimated: true,
            isFitWidth: true
        });
    });
}


var result = $('.box').find('a').embedly({
    maxWidth: 260,
    wmode: 'transparent',
    method: 'after',
    chars: 50,
    width: 260,
    key: ':cd54253e69944ae18ad5ece38b4d0e1e' //temporal
}).bind('embedly-oembed', function(e, oembed) {

    // not as elegant as I would like but increment
    // the counter. Once we have gotten to 
    // the number of matches call masonry
    //
    // It would be much cleaner if embedly could return some kind
    // of deferred object that gets resolved after all matched
    // content has been loaded. 

    loaded++;

    console.log("loaded " + oembed.title);

    if (loaded == matches) {
        callMasonry();
    }


});;
点赞