我们在做图片延迟加载或者加载大图片时我们希望显示一个loading图片友好的提示用户,这时我们常用图片的load事件,这个事件是在图片加载完成时触发的,但是有个前提条件就是,只能在图片第一次加载时能触发。这当用户第二次打开图片时我们开发就遇到了难题,如果判断图片是否已经加载过(本地缓存了)?这时就该complete属性登场了,如果本地缓存了complete==true了

例子:

function showImg(newSrc){
    var newimg = $('<img />').load(function(){
        $('#curImg').html('').append($(this));
        var w = $('#imgShow').width();
        $('#imgShow').stop().animate({marginLeft:w/2*-1});
    }).attr('src',newSrc);
    if(newimg[0].complete){
        $('#curImg').attr('_src',newSrc).html('').append(newimg);
    }else{
        $('#curImg').attr('_src',newSrc).html('').append(tmpImg);
    }
    var w = $('#imgShow').width();
    $('#imgShow').animate({marginLeft:w/2*-1});
}

一. 说明

     众所周知, 图片也有onload事件, 该事件会在图片第一次加载完成时触发, 如果图片已经加载一次, 则再次加载时,
onload事件是不会触发的(前提是没有清空浏览器缓存).
二. 实际应用    
    有时会做这样的效果: 当图片未加载完成时, 给出一个图片正在加载的提示(比如, loading动画), 只要图片图片加载完成, 则立即显示图片(咋一看上去还以为是用的异步请求图片呢),  那相应的代码怎么写呢:
// 当图片存在缓存时, 不会触发onload事件, 但图片的complete属性会为true
if (oImg.complete) {
  // code
} else {
  oImg.onload = function() {// code}
}