等待 div 中的图像在使用 ajax 附加内容和 jquery 的 fadeIn() 之前加载答案

【问题标题】：wait for images in div to load before fadeIn() with ajax appended content and jquery等待 div 中的图像在使用 ajax 附加内容和 jquery 的 fadeIn() 之前加载
【发布时间】：2012-08-28 12:55:17
【问题描述】：

我正在开发一个使用 jquery 的 $.ajax 将图像页面加载到 div 中的网站。当用户滚动到页面底部时，另一页图像被加载到 div 中。目前我有新的内容淡入，但它在图像完全加载之前淡入。我检查了解决方案，但找不到任何对我有用的解决方案。为了澄清，每组图像都是一个 div，其中填充了单个图像的 div。

这是我正在使用的加载函数：

function loadContent(pageName, pageView, max_feed){
        loader="<div id=loader><img src=SPACER" height=\"100\" \>"
            + "<br/><img src=\"LOADER" />"
            + "<br/><img src=\"SPACER" height=\"100\" \></div>";
        $(loader).appendTo('#photo_container').fadeIn('fast');
        $.ajax({
            url:pageName,
            data:{view:pageView, max_feed_id:max_feed},
            success:function(result){
                $('#loader').remove();                  
                $(result)
                    .appendTo('#photo_container')
                    .hide()
                    .fadeIn('slow');
                $(window).data('loading', false);
            }
        });
    };

有什么简单的方法可以让我在调用 fadeIn() 之前等待新内容加载？即是否有类似于

$(window).load(...)

我可以只用于 div 内容吗？我正在考虑设置某种全局变量，例如 isLoadingMore，然后在 ajax 加载内容的开头将其设置为 false，然后添加

$(window).load(...)

函数到 ajax 页面，其中将有一个函数将变量设置为 true，然后只需添加一个 while 循环或等待该标志设置为 true 的内容，然后再调用 loadContent 函数中的fadeIn 函数.不知道这是否是个好主意，甚至工作

【问题讨论】：

标签： jquery ajax fadein

【解决方案1】：

在您的图像上，您可以执行以下操作

$('img').load(function(e){
$(this).fadeIn();
});

【讨论】：

【解决方案2】：

我的插件听起来不错：waitForImages。

【讨论】：