Question

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

我现在看到，fade in显示为快。内容仍在加载（主要是iframe）。我尝试在激活新内容的fade in之前使用load事件，但它不起作用。这是代码：

//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) fade in之前插入加载函数，因为fade in在#main完全加载时需要{{1}}。但它没有用，或者我不知道该怎么做。

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

Answer 1

准备好的功能应该修复它：.ready()

代码必须如下所示：

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

为我工作了好几次。与描述一样，函数在加载DOM后执行。

Answer 2

尝试

document.body.onload

或

$(document).ready(function() {
        // Animate loader off screen
        $(".spinner").fadeOut(300);
        $("#showpage").fadeIn(2000);
    });

由于

在内容完全加载时显示Ajax内容

2 个答案: