使用jQuery Ajax，在触发函数之前等待图片加载完成

Question

您好，我有一个jQuery内容动画，除了内容加载外，一切都运行正常。

$(function() {
var newHash      = "",
    $mainContent = $("#main_content"),
    $pageWrap    = $(".big_col"),
    $main_menu = $("a.main_menu"),
    baseHeight   = 0,
    $el;

$pageWrap.height($pageWrap.height());
baseHeight = $pageWrap.height() - $mainContent.height();

$("body").delegate("a.main_menu", "click", function() {
    window.location.hash = $(this).attr("href");
    return false;
});

$(window).bind('hashchange', function(){

    newHash = window.location.hash.substring(1);

    if (newHash) {
        $mainContent
            .fadeOut(200, function() {
                $mainContent.hide(function() {
                    $(".loader").show();
                    var page = newHash.replace(/\..+$/, '');
                    var page = page.replace(/!/, '');
                    var data = 'page=' + page;
                    $.ajax({
                            url: "main_content/action.php", 
                            type: "POST",       
                            data: data + "&request=ajax",
                            cache: false,
                            success: function (html) {

                                    $mainContent.html(html);
                                        $("#main_content").ready(function() {
                                            //var loaded = 0;
                                            $(".loader").hide();
                                    _gaq.push(['_trackPageview', '/it_'+page]);
                                                    $mainContent.fadeIn(200, function() {
                                                    $pageWrap.animate({
                                                    height: baseHeight + $mainContent.height() + "px"
                                                    }, 300);
                                                });

                                        $main_menu.removeClass('current');
                                        $('a[href="#' + newHash + '"]').addClass('current');
                                        return false

                                        });
                                    //});

                              }
                        });

                    });

                });


    };

});

$(window).trigger('hashchange');

});

这是代码，我几乎尝试了在Stack Overflow和其他网站上阅读的所有内容，但似乎没有任何效果（您在粘贴的代码中看到的.ready只是我尝试的最后一件事）。 我尝试使用.load、bind load、live load、img .lenght、.ready等所有内容，无论是选择图像还是整个div，但仍然没有任何效果。

有什么建议吗？谢谢

编辑：事实上，在没有任何函数触发器的情况下，脚本可以正常工作。如果我使用任何这些触发器（除了.ready，但它不执行应该执行的操作），脚本会停止在那个触发器处（我隐藏了加载程序），并且不会继续执行。

- g0dl3ss

---

插入HTML不是异步的，仅检查容器是无效的，您必须检查图像的onload处理程序以查看它们是否已加载。 - adeneo

我尝试使用$("<img>").on('load', function() {，但它也不起作用。 - g0dl3ss

这是因为您刚刚创建了一个空的图像标记？ - adeneo

Answer 1

好的，我解决了。 问题在于我认为jQuery很聪明，会想到“这个家伙有一个函数，当图片加载时就会触发。即使内容div里没有图片，它也会继续执行”。 不幸的是，并不是这样的，如果你像这样编写事件：

$("#mydiv img").on('load', function(){
alert("images loaded");
});

当且仅当 #mydiv 中存在图片并且这些图片已被加载时，警告才会被触发。 如果 #mydiv 仅包含文本，则函数也不会被触发。 我通过添加解决了这个问题。

if ($("#main_content").find("img").length > 0) {
     $("#main_content img").on('load', function() {

否则使用普通的ajax加载函数。

谢谢回复。

- g0dl3ss