经过不断尝试，解决长文折叠有时失效的情况

失效的根源就是图片未载入的时候获取的高度是0，导致实际高度不正确的情况。
经过不断尝试，最终效果还算满意，实现流程就是：

• 首先判断文档高度是否超过500px，超过的话，高度就是正确的，直接执行；

• 不到500px的话开始判断是否有图片，if(Img.length>0){};，没有就结束了，有图片继续执行；

  • 执行Img.each(function(){每个图片都加入
  • 然后$(this).on('load',function() {不断 load 图片
  • 在然后Height = postContent.height();，load 之后重新获取post-content的高度，直到超过500PX执行动作，或者图片结束。
  • 执行动画之后，需要停止load和each。

完整的代码是这样的：

//过长折叠：持续加载图片后获取高度，直到超过500就折叠并停止判断行为。
$(document).ready(function () {
    $('.post-content').each(function () {
        var postContent = $(this);
        var Height = postContent.height();
        if(Height > 500) {
            postContent.animate({height: '500'}).parent().append('<div class="read-more">-- 展开剩余部分 --</div>');
        } else {
            var Img = postContent.find('img');
            if(Img.length>0){
                var Result = true;
                Img.each(function(){
                    $(this).on('load',function() {
                        Height = postContent.height();
                        if (Height > 500) {
                            postContent.animate({height: '500'}).parent().append('<div class="read-more">-- 展开剩余部分 --</div>');
                        return false;
                        };
                    });
                    if (Height > 500){
                        return false;
                        Result = false;
                    }
                });
                if (!Result) return false;
            }
        }
    });
});

$(document).on('click', '.read-more', function () {
    var postContent = $(this).parent().find('.post-content');
    autoHeight = postContent.css('height', 'auto').height();
    postContent.height(500).animate({
        height: autoHeight
    });
    $(this).fadeOut();
});

这样的话，就不会出现很多图片却不能折叠的情况了。实际效果是文字部分超过500px直接折叠，不够的话，就等第一张图片载入后继续判断高度，一直到高度达到500px开始折叠，更多的图片都看不见载入过程了。目前看来没有什么问题。