判断接口返回数据中图片是否加载完成

有时候对请求到的数据进行加载的过程中,当包含大量图片且图片比较大(多)导致加载比较慢的时候,直接获取容纳接口内容元素的clientHeight 属性会印图片未加载的部分出现偏差,因此这种情况下可以对接口中返回的图片数据进行是否加载完成的判断,当所有图片都加在完成之后才能得到正确的clientHeight 属性值。方法如下:

//假设contentData为接口返回的json数据,需要把其中content字段的内容显示于页面的content元素中
$("content").innerHTML = contentData.content;
//获取content元素中所有的img标签,返回结果为数组类型
var img = document.getElementById("content").getElementsByTagName("img");
iDebug("chaopy    img="+img+"    length="+img.length);
if(img.length > 0){
	for(var i = 0; i < img.length; i++){
		//当img[i]未被加载或者未加载完成的时候才会执行img[i].onload部分
		img[i].onload = function(){
			//其中450为content元素显示的高度,pageNum 为content数据加载完成的情况下分几页显示
			pageNum = Math.ceil(parseInt($("content").clientHeight) / 450) || 1;	
		}
	}
}
// 避免内容中没有图片或者图片很快加载完成则不会执行onload的情况下计算页码数
pageNum = Math.ceil(parseInt($("content").clientHeight) / 450) || 1;	

才疏学浅,愿各位大神多多指教!

发布了33 篇原创文章 · 获赞 35 · 访问量 813

猜你喜欢

转载自blog.csdn.net/chaopingyao/article/details/104773408