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() 函数 用于预加载图片。它接受任意数量的图片路径作为参数，并将这些图片加载到浏览器的缓存中，以便在需要时可以更快地显示。
- 该函数首先检查浏览器是否支持图片加载，然后创建一个数组 d.MM_p 来存储图片对象。
- 接着，它使用 for 循环遍历传入的参数数组，并使用 new Image() 创建新的图片对象，并将其存储在数组 d.MM_p 中。
MM_swapImgRestore() 函数 用于恢复被切换的图片。它遍历 document.MM_sr 数组，将每个图片对象的 src 属性重置为原始的 oSrc 属性，从而恢复图片的原始状态。
MM_findObj() 函数 用于查找指定名称的 HTML 元素对象。它接受两个参数：要查找的元素的名称和可选的文档对象。如果没有指定文档对象，则默认使用当前文档。
- 该函数首先检查名称中是否包含 ? 字符，如果有，则表示要查找的元素在父框架中。它会根据父框架的文档对象来查找元素。
- 然后，它通过使用 document.all 属性或 document.forms 数组来查找元素。
- 最后，它使用 document.layers 和 document.getElementById 方法来查找元素。
- 如果找到了元素，则返回该元素对象，否则返回 null。
MM_swapImage() 函数 用于切换图片。它接受任意数量的参数，每个参数都是一个字符串数组，包含三个元素：要切换的图片的名称、要切换的图片的路径和要切换到的图片的路径。
- 该函数首先创建一个新的数组 document.MM_sr 来存储要切换的图片对象。
- 然后，它使用 for 循环遍历传入的参数数组，并使用 MM_findObj() 函数查找要切换的图片对象。
- 如果找到了图片对象，则将其存储在 document.MM_sr 数组中，并将其 src 属性设置为要切换到的图片的路径。
- 如果图片对象没有 oSrc 属性，则将其 src 属性设置为原始路径。

使用示例:

<img src='loading.gif' id='myImage' onmouseover='MM_swapImage('myImage','','image1.jpg','image2.jpg');' onmouseout='MM_swapImgRestore();' alt='图片'>

该代码段展示了如何在图片上使用 onmouseover 和 onmouseout 事件来切换图片。MM_swapImage() 函数被用于将图片切换到 image1.jpg 和 image2.jpg，MM_swapImgRestore() 函数则用于恢复图片到原始状态。

JavaScript 图片预加载和切换函数详解 - MM_preloadImages, MM_swapImgRestore, MM_findObj, MM_swapImage