异步图片加载不能撑开DIV

Question

问题描述

官网的文章内容是从后台请求的。然后通过JQ的html()插入到div里面；
插入之后获取容器的高度和实际的高度不符合。
然后会导致溢出。我觉得是图片加载的问题。
有没有大佬提供个思路。
代码在公司电脑， 明天贴上来

Answer 1

不能撑开DIV原因是：图片还没有完全加载完成，div不能获取图片的真正高度，导致撑不开。
解决方案：监听图片的加载过程，等图片加载完成后，使用JQ的html()方法插入。

你可以自己写代码判断所有图片加载完成后（序号考虑兼容问题，特别是IE），再插入到dom中。也可以使用现有的插件，比如
imagesLoaded（官网：https://imagesloaded.desandro...）

伪代码（这里使用jquery的方式使用该插件，该插件也可以不使用juery）:

//html是从后台获取到的数据
var html = "<div>aaa<img src="xxx"/>bbb<img src="xxx"/></div>";
$(html).imagesLoaded( function() {//图片加载完成后再插入到dom中。
       //插入到dom中。
});

Answer 2

楼上说的有些道理，我补充一点，可以通过监听图片的onload事件，在这个事件中，你可以拿到图片的宽高，然后可以暂时先把容器设置为同样的宽高。