0

总的来说，我对 jQuery、AJAX 和 web 开发还很陌生，所以这让我抓狂。

我有一个 AJAX 请求将页面内容拉入当前页面，我试图强制 jQuery 像这样显示它：

  1. 淡出当前内容
  2. 平滑地将 div 调整为新内容
  3. 淡入新内容

到目前为止，我已经把它写成这样。我已经把它改了一大堆，所以这可能不是我得到的最接近的，但同样的问题仍然存在。

$("#page-data").fadeOut(600).html(data);

$("#page-data").ready(function() {
    var newHeight = $('#' + divname).height();
    $("#page-data").animate({
        height: newHeight,
    }, 600, function() {
        $("#page-data").fadeIn(100);
    });
});

页面数据具有这种简单风格的地方：

#page-data { position: relative; overflow: hidden; }

我的问题是这$('#' + divname).height()不考虑 div 中可能发生的图像和其他事情。我尝试使用.load()而不是.ready()，但是根本没有调用回调。

4

1 回答 1

1

由于问题中没有包含任何 HTML，我假设您的容器<div id="pageData">包含另一个<div>（由 标识divname），您正在将动态内容加载到该容器中。

首先，$(..).ready()只能在document对象上使用，因此将其应用于 a<div>违背了 jQuery 的文档。

我认为实现您的目标的最佳方法是跟踪您通过 AJAX 动态加载的 HTML 中的任何图像并监视它们，直到它们全部被加载。然后你可以应用你的逻辑来设置你的容器的高度<div>。

问题是，如果我们将load事件处理程序应用于已经加载的图像，那么它不会触发。确定图像是否已经加载可能很棘手，但公认的智慧似乎是检查complete属性（如果存在）或检查图像的高度是否大于 0：

function imageLoaded(img) {
    if(typeof img.complete != 'undefined') {
        return img.complete;
    }
    else {
        return(img.height > 0);
    }
}

现在我们可以采取以下步骤：

  1. 淡出将包含您的 AJAX 内容的<div>（例如）#pageContent
  2. 加载 AJAX 内容
  3. 搜索所有图像的新内容，计算有多少，为每个图像添加一个load事件处理程序，然后循环检查每个图像是否已经加载，如果是则手动触发load事件。
  4. 在加载事件中，我们递减计数器。当计数器达到零时，然后计算容器的高度<div>并淡入内容

例如（有关工作的 jsfiddle，请参见此处）：

$pageData = $('#pageData');
$pageContent = $('#pageContent');

$pageData.height($pageData.height());

$pageContent.fadeOut(function() {
    $pageContent.load('http://your.dynamic.content', contentLoaded);
});

function contentLoaded() {
    var $loadables = $(this).find('img');
    var loadableCount = $loadables.length;

    // Attach onLoad event handlers to each image
    $loadables.load(function() {
        loadableCount--;
        checkAllLoaded(loadableCount);
    });

    // Trigger the onLoad events manually for any images that have already loaded
    $loadables.each(function() {
        if(imageLoaded(this)) {
            $(this).trigger('load');
        }
    });
}

function checkAllLoaded(loadCount) {
    if (loadCount <= 0) {
        $('#pageData').animate({
            height: $('#pageContent').height()
        }, 600, function() {
            $('#pageContent').fadeIn();
        });
    }
}
于 2012-12-13T18:38:44.897 回答