小编在之前发布的《jquery滑动展开与收起倒数10秒自动收缩全屏广告代码》这个jquery广告效果中，存在一个图片未完全加载完毕(图片下载中)与已开始倒数10秒自动收起图片的问题，即广告图片未完全显示出来的时候，已经开始倒数10秒钟进行关闭广告图片了(除去下载广告图片的时间，广告图片实际显示的时间少于10秒)。如果要限定广告图片显示10秒的时间，就需要等待图片完全加载完毕之后再开始倒数10秒的关闭或收起的设置。

这里关键的问题是如何检测图片加载完毕？很简单，就是图像的load事件。图像上面可以触发load事件，无论是在DOM中的图像元素还是HTML中的图像元素。因此，可以在HTML中为任何图像指定onload事件处理程序，也可以使用JavaScript来实现，例如：

var image=document.getElementById("myImage");
if(image.addEventListener){
  image.addEventListener("load",function(event){
    alert(event.target.src);
  },false);
}else if(image.attachEvent){
  image.attachEvent("onload",function(event){
    alert(window.event.srcElement.src);
  });
}else{
  image["onload"]=function(event){
    event=event || window.event;
    var target=event.target || event.srcElement;
    alert(target.src);
  }
}

这里，使用JavaScript指定了onload事件处理程序。同时也传入了event对象，尽管它也不包含什么有用的信息。不过，事件的目标是<img>元素，因此可以通过src属性访问并显示该信息。在创建新的<img>元素时，可以为其指定一个事件处理程序，以便图像加载完毕后给出提示。此时，最重要的是要在指定src属性之前先指定事件，如下面的例子所示。

window.addEventListener("load",function(){
  var image=document.createElement("img");
  image.addEventListener("load",function(event){alert(event.target.src);},false);
  document.body.appendChild(image);
  image.src="https://www.wangzhanchengxu.com/uploadfile/2017/0125/20170125093749838.jpg";
},false);

写到这里相信大家都知道如何解决本文开头讲述的问题了吧！