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

Question

我目前正在工作 http://davidpetersson.nu/madartwork/

我想将帖子中的内容加载到我的起始页上的 div 中。这有效。有点像。

我有一个特定的 div 和一个单击事件，该事件从帖子中获取内容并将其 ajax 加载到 div 中。 div 的高度为 0px，直到我加载，然后我测量内容并设置动画高度以匹配内容。

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

示例。点击“频段 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;
    });
});

我尝试包含这篇文章中的 .imagesLoaded jQuery Ajax 等待所有图像加载完毕

但我还没有让它发挥作用。

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

这是我的第一个 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;
    });
});