jquery - jQuery - 仅在触发 fadeIn() 时加载 div 的内容

Question

我想知道是否可以仅在显示 div 时加载它的内容，以减少浏览器负载。例如，一个 div 一开始是隐藏的，但是当一个按钮被按下时，会触发一个 fadeIn()。我可以让该 div 的内容仅在它淡入后加载吗？

这是我现在拥有的代码：

$(document).ready(function(){
    $('.page1').click(function() {
        $('.page1').fadeOut(250, function() {
            $('.page2').fadeIn(250)
        });
    });
});

我只想加载 .page2 的内容，一旦它可见。

谢谢。:)

Answer 1

您可以在fadeIn 之后从ajax 触发加载

$(document).ready(function(){
    $('.page1').click(function() {
        $('.page1').fadeOut(250, function() {
            $('.page2').fadeIn(250, function(){
                $(".page2").load("/somepage.htm")
            })
        });
    });
});

见：http ://api.jquery.com/load/

Answer 2

$(function(){
    // Please hide your div inside the content div either in css or js.
    $('#contentDiv').css('display', 'none');

    $('.page1').click(function() {
        $('.page1').fadeOut(250);
        $('.page2').fadeIn(250, function(){
            $('#contentDiv').css('display', 'block');
        })
    });
});