imagesLoaded.js验证文章内容图片是否加载完全并实现回调的实例

引入js文件：

<script src="../../js/imagesloaded.pkgd.js"></script>

对一个元素下的所有img进行监控：

function loaderlistening() {
        //监听blogcontent下的所有img标签元素，对每一个图片的加载作出反应
    	$('.blogcontent').imagesLoaded().progress(function (instance, image) {
			var rs = image.isLoaded ? 'loaded' : 'broken';
			var time = new Date();
			if(rs == 'loaded') {
				console.log(time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds() + " 第一次加载成功 " + image.img.title);
				return;
			} else {
				var initnum = 0;
				callback(initnum, image);//加载失败开始回调
			}		
		});
	}	

加载失败后回调：

function callback(initnum, image) {
		var num = initnum;
		var isLoad = true;
		var time = new Date();
		var thisimage = $(image.img);
		var height = image.img.height;
		var imageurl = image.img.src;
		var imagename = image.img.title;
                //利用高度判断图片是否加载，一般加载失败的图例也会有一个高度，比如chrome上是24px
		if(height < 100){
            isLoad = false;
        }
		if(isLoad) {
			console.log(time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds() + " 第 " + num + " 次加载成功 " + imagename);
                        //将页面元素图片src替换，不然指向的还是加载失败的那张图片缓存
			image.img.src = imageurl + '#';
			return;
		} else {				
			console.log(time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds() + " 第 " + num + " 次加载失败 " + imagename);
                        //回调的次数，按需设置
			if( num == "10" ) {
				return;
			} else {
				var nextnum = num + 1;
				console.log(time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds() + " 开始第 " + nextnum + " 次回调 " + imagename);
				callbackimage = new Image();
                                //给新new的图片和静态页上img元素的图片地址都加一个#号，避免浏览器访问缓存
				var imgsrc = imageurl + '#';
				thisimage.attr("src", imgsrc);
				callbackimage.src = imgsrc;
                                //每次失败后都回调，自己设置间隔时间方便测试时看日志
				setTimeout(function () { callback(nextnum, image); }, 5000);
			}				
		}	
	}
 

初始化：

$(document).ready(function() {
    	loaderlistening();
    });

调控制台看日志，效果一目了然