JavaScript 预加载和切换图片函数详解

以下代码是一段用于预加载和切换图片的 JavaScript 代码。

function MM_preloadImages() {
  var d=document; if(d.images){
    if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf('#')!=0){
      d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];
    }
  }
}

function MM_swapImgRestore() {
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) {
  var p,i,x;  if(!d) d=document; if((p=n.indexOf('?'))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);
  }
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() {
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){
     document.MM_sr[j++]=x;
     if(!x.oSrc) x.oSrc=x.src;
     x.src=a[i+2];
   }
}

解释以上代码内容：

• MM_preloadImages 函数 用于预加载图片。它接受一个参数列表，其中包含要预加载的图片的 URL。该函数会创建一个 Image 对象数组，将每个图片的 URL 赋值给对应的 Image 对象的 src 属性，以实现预加载。

• MM_swapImgRestore 函数 用于恢复图片。它会遍历 document.MM_sr 数组，将每个图片对象的 src 属性恢复为原始的 oSrc 属性的值。

• MM_findObj 函数 用于查找指定名称的对象。它接受两个参数，第一个参数是要查找的对象的名称，第二个参数是可选的对象的根节点，默认为 document。该函数会先尝试通过名称查找对象，如果找不到则会遍历表单和图层来查找对象。最后，如果支持 getElementById 方法，则使用该方法来查找对象。

• MM_swapImage 函数 用于切换图片。它接受一个参数列表，其中包含要切换的图片对象的名称和对应的图片 URL。该函数会遍历参数列表，通过 MM_findObj 函数找到对应的图片对象，并将其 src 属性设置为指定的 URL。

通过使用这些函数，可以实现在网页上预加载图片，以及在鼠标事件触发时切换图片。

示例：

<img src='image1.jpg' onmouseover='MM_swapImage('image1','','image2.jpg','image1.jpg')' onmouseout='MM_swapImage('image1','','image1.jpg','image2.jpg')'>

这段代码使用 MM_swapImage 函数在鼠标悬停在图片上时将图片切换为 image2.jpg，鼠标移开时切换回 image1.jpg。