Question

我正在使用函数pinterest_it()来调整masonry.js的视图，并且我正在使用另一个函数recipeLoader()来显示加载图标，直到页面完全加载，然后显示内容。这适用于页面刷新，但是当我使用ajax加载内容时，我的$( window ).load(...)函数永远不会触发。

如何在所有内容完全加载后（不是.ready）

进行函数调用

function pinterest_it() {
    $(".loader").show(); # shows loading icon
    $("#recipe-index").css("opacity", 0); # makes content invisible

    if ( $(document).innerWidth() < 991 ) {
        gutter = 0
    } else {
        gutter = 16
    }

    var $grid = $('.grid').imagesLoaded( function() {

        var $blah = $('.grid').masonry({
            itemSelector: '.grid-item',
            columnWidth: function( containerWidth ) {
                return $('.grid-sizer').width();
            },
            percentPosition: true,
            gutterWidth: gutter
        });

    }, fixGrid())

    recipeLoader(); # see below
}

function recipeLoader() {
    console.log("recipe loader")
    $(window).load(function() { # doesn't fire after Ajax completes!
        console.log("loaded")
        $(".loader").hide(); # hides loading icon
        $("#recipe-index").animate({
            opacity: 1 # shows content
        }, 400);
    });
}

# one of the Ajax function that calls pinterest_it()
$(".togglebutton input").click(function () {
    console.log($(this).serialize());
    $.get(this.action, $('#recipes_search').serialize(), function() {
        pinterest_it();
    }, 'script')
});

我试过$(x).ready(...)没有运气，还有ajaxComplete()。也许有一些方法可以使用$(x).load(...)与特定元素而不是窗口来允许函数触发？我试过在$("#recipe-index")上调用它，但这也不起作用。

Answer 1

$（window）.load不会在Ajax请求成功/完成时触发。将该位移动到其自己的功能：

  function handlePageRefresh () {
    console.log("loaded")
    $(".loader").hide(); # hides loading icon
    $("#recipe-index").animate({
        opacity: 1 # shows content
    }, 400);
 }

然后在$（窗口）中调用它.load＆amp; Ajax成功回调

$(window).load(function() { # doesn't fire after Ajax completes!
    handlePageRefresh()
});

# one of the Ajax function that calls pinterest_it()
$(".togglebutton input").click(function () {
    console.log($(this).serialize());
    $.get(this.action, $('#recipes_search').serialize(), function() {
      handlePageRefresh()
      pinterest_it();
    }, 'script')
});

jQuery：ajax完全呈现后的调用函数

1 个答案: