Jquery ajax，在触发功能之前等待图像加载答案

【问题标题】：Jquery ajax, wait for images to load before firing functionJquery ajax，在触发功能之前等待图像加载
【发布时间】：2012-08-28 09:01:33
【问题描述】：

您好，我有一个 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');

});

这是代码，我尝试了我在堆栈溢出和其他网站上阅读的几乎所有内容，但似乎没有任何效果（您在我粘贴的代码中看到的 .ready 只是我尝试的最后一件事）我尝试了 .load、绑定加载、实时加载、img .lenght、.ready，一切都选择图像或整个 div，但似乎仍然没有任何效果。

有什么建议吗？谢谢

编辑的是，没有任何功能触发器，脚本就可以正常工作。如果我使用这些触发器中的任何一个（.ready 除外，但它没有做它应该做的事情），脚本会在那个触发器处停止（我隐藏加载器的地方）它不会继续前进。

【问题讨论】：

插入 HTML 不是异步的，仅仅检查容器是没有用的，你必须检查图像 onload 处理程序以查看它们是否已加载。
嗯我试过 $("").on('load', function() { 但它也不起作用
那是因为你刚刚创建了一个空的图片标签？

标签： jquery ajax load priority-queue

【解决方案1】：

好的，我解决了。问题是我认为 jquery 足够聪明，可以思考“好吧，这个伙伴有一个功能，可以在加载图像时拍摄。即使内容 div 中没有图像，OFC 也会继续”。不幸的是，如果你写一个像

这样的事件，它不是那样的

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

警报只会触发如果#mydiv 中有图片并且如果图片已加载。如果#mydiv 只包含文本，该函数也不会被触发。我通过添加解决了

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

其他正常的ajax加载功能。

感谢回复

【讨论】：