jquery - 内容完全加载时显示 Ajax 内容

Question

我的脚本有一点问题。在我的 WordPress 页面中，我更改了导航，以便单击内容淡出，显示一个微调器，然后通过 jQuery.load 加载新帖子，内容淡入。

我现在看到，淡入显示得很快。内容仍在加载(主要是 iframe)。我尝试在触发新内容的淡入之前使用加载事件，但它不起作用。代码如下:

//LOAD SPINNER - Fade out when content loaded on Frontpage!
$(window).load(function() {
    // Animate loader off screen
    $(".spinner").fadeOut(300);
    $("#showpage").fadeIn(2000);
});  

jQuery('.pagination a').live('click', function(e) { //check when pagination link is clicked and stop its action.
    e.preventDefault();
    var link = jQuery(this).attr('href'); //Get the href attribute
    jQuery('#ajaxcontent').fadeOut(500, function() { //fade out the content area
        jQuery(".spinner").show(); // show the loader animation
    }).load(link + ' #main', function() {
        jQuery('#ajaxcontent').fadeIn(500, function() { //load data from the content area from      paginator link page that we just get from the top
                jQuery(".spinner").hide(); //hide the loader
            }); 
        });     
    });

我尝试在淡入之前的.load(link + #main Function)之后插入一个加载函数，因为我想要淡入 code> 当 #main 完全加载时。但这不起作用或者我不知道该怎么做。

工作测试站点:http://www.peyotedesign.ch/indie

Answer 1

函数就绪应该修复它:.ready()

代码必须如下所示:

jQuery( document ).ready(function( $ ) {
    $(".spinner").fadeOut(300);
    $("#showpage").fadeIn(2000);
}

为我工作过几次。正如描述所说，这些函数是在 DOM 加载后执行的。