当我尝试计算高度时，Ajax 加载不会等待 img 加载

Question

我现在在 http://davidpetersson.nu/madartwork/ 工作

我想将帖子中的内容加载到起始页上的 div 中。威奇的作品。有点。

我有一个特定的 div 和一个 click 事件，它从帖子中获取内容并将其 ajax 加载到 div 中。在我加载之前，div 的高度为 0px，然后我测量内容并对高度进行动画处理以匹配内容。

它适用于文本，但是当我尝试加载包含图片的帖子时，有时我测量时图像没有完全加载。

示例。点击“Band 6”

我使用的脚本是这样的：

jQuery(document).ready(function(){

    var $mydiv = jQuery('#single-post-container');
    $mydiv.css('height', $mydiv.height() );
    jQuery.ajaxSetup({cache:false});


    jQuery( window ).resize(function() {
        jQuery("#single-post-container").wrapInner('<div/>');
        var newheight = jQuery('div:first',"#single-post-container").height();
        jQuery("#single-post-container").css( {height: newheight} );
    });

    jQuery(".view-details").click(function(event123){
        event123.preventDefault();
        var post_id = jQuery(this).attr("href");

        jQuery("#single-post-container").load(post_id  + " .post", function(){

            jQuery('#single-post-container').wrapInner('<div/>');
            var newheight = jQuery('div:first','#single-post-container').height();

            //Does sometimes not include the height of the images, since they havnt completely loaded

            jQuery('#single-post-container').animate( {height: newheight} );

            jQuery('html, body').animate({
                scrollTop: jQuery('body').offset().top
            }, 800);

        });
        return false;
    });
});

我试图从这篇帖子jQuery Ajax wait until all images are loaded 中加入 .imagesLoaded

但我还没有设法让它工作。

（使用 jQuery 而不是 $ 因为 wordpress）

这是我的第一个 ajax-script-tinkerings 之一，所以有些东西可能真的是错误的，所以要温柔 :)

Answer 1

两件事：

1. 您可以通过$ 内的ready state 使jQuery 可访问。只需将$ 作为内部function 的第一个参数传递。现在你可以在内部使用$ 了。如果您想在某处重用代码，那就更好了。

2. 您可以跟踪容器内img 的加载情况。只需使用加载回调包装您的代码，当所有内容都加载完毕后，就可以开始工作了。

---

jQuery(function($) {
    var $mydiv = $('#single-post-container');
    $mydiv.css('height', $mydiv.height());
    $.ajaxSetup({
        cache: false
    });

    $(window).resize(function() {
        $("#single-post-container").wrapInner('<div/>');
        var newheight = $('div:first', "#single-post-container").height();
        $("#single-post-container").css({
            height: newheight
        });
    });

    $(".view-details").click(function(event123) {
        event123.preventDefault();
        var post_id = $(this).attr("href");

        $("#single-post-container").load(post_id + " .post", function() {
            $('#single-post-container').wrapInner('<div/>');

            var callback = function() {
                var newheight = $('div:first', '#single-post-container').height();

                $('#single-post-container').animate({
                    height: newheight
                });

                $('html, body').animate({
                    scrollTop: $('body').offset().top
                }, 800);
            }

            // wait for all images to be loaded
            var count = $('#single-post-container').find('img').load(function() {
                if (--count === 0) {
                    callback();
                }
            }).length;

            // or if no image available
            if( count === 0 ) {
                callback();
            }
        });

        return false;
    });
});