http://www.blogjava.net/sinoly/archive/2007/09/14/145161.html
预加载与JavaScript的Image()对象 (转)
很多高分辨率的图像真的能够扮靓一个Web网站。但是它们也可能会降低网站的（响应）速度——图像都是文件，文件就要占用带宽，而带宽与等待时间直接相关。现在是你进行自我学习，了解如何利用一种叫做图像预加载的小技巧给网站提速的时候了。
图像的预加载
浏览器通常的工作方式是：只有当要求加载图像的HTTP请求被发送的时候，图像才会被加载，而不论它是被动地通过<img>标记加载，还是主动地通过方法调用加载。所以，如果你有一段JavaScript，需要在鼠标悬停的时候切换图像，或者在超时之后自动地更换图像，那么你就可能会在从服务器取回图像的时候随时碰到等待，时间会从数秒钟到几分钟不等。当你以较慢的速度连接到Internet上的时候，或者被取回的图像非常巨大的时候，这种状况尤其显著，而这种数据延迟通常都会毁掉你所期望的效果。
有些浏览器会试图转嫁这一问题，比如把图像保存在本地缓冲区里，这样以后对它的调用就能够很快进行了，但是需要第一次调用图像的时候仍然会产生延迟。预加载是一项在需要图像之前就把它下载到缓冲区里的技术。通过这种方式，当真的需要图像的时候，它可以被从缓冲区里取出来，并立即显示出来。
Image()对象
预加载图像最简单的方法用JavaScript将一个新的Image()对象实例化，并把你想要预加载的图像的URL传递给它。假设我们有一个叫做http://www.host01.com/Get/jsp/00040004/heavyimagefile.jpg的图像，我们希望，当用户把鼠标放在一个已经显示过的图像上的时，系统能够显示出这个图像。为了预加载这个图像，以便实现更快的响应时间，我们只用创建一个新的Image()对象，将其命名为heavyImage，并使用onLoad()事件处理程序把它同时加载到页面上。
1 < html >< head >< script language = "JavaScript" > function preloader() {heavyImage = new Image(); heavyImage.src = " http://www.host01.com/Get/jsp/00040004/heavyimagefile.jpg " ;} </ script ></ head >< body onLoad ="javascript:preloader()" >< a href ="#" onMouseOver ="javascript:document.img01.src='http://www.host01.com/Get/jsp/00040004/heavyimagefile.jpg'" >< img name ="img01" src =http://www.host01.com/Get/jsp/00040004/"justanotherfile.jpg" ></ a ></ body ></ html >
2
要注意的是，图像标记自身并不会处理onMouseOver()和onMouseOut()事件，这就是为什么上面例子里的<img>标记被放在一个<a>标记里，后者的确加入了对这些事件类型的支持。
用数组加载多个图像
在实际操作中，你可能需要预加载一幅以上的图像；例如，在包含有多个图像翻滚（rollover）的菜单条里，或者如果你正在尝试创建平滑的动态效果。这并不困难；你所需要做的就是使用JavaScript的数组，就像下面例子里的一样：
1 < script language = " JavaScript " > function preloader() { // counter var i = 0; // create object imageObj = new Image(); // set image list images = new Array(); images[0]="image1.jpg" images[1]="image2.jpg" images[2]="image3.jpg" images[3]="image4.jpg" // start preloading for(i=0; i<=3; i++) { imageObj.src=images[i]; }
2 } </ script >
在上面的例子里，你先定义变量i和叫做imageObj的Image()对象。然后定义一个叫做images[]的新数组，在这个数组里，每个数组元素都保存着需要预加载的图像来源。最后，创建一个for()循环，让它在数组里循环，并将它们中的每一个都指派给Image()对象，这样就能够把它预加载到缓冲区里。
onLoad()事件处理程序
就和JavaScript里的其它很多对象一样，Image()对象也带有多个事件处理程序。这其中最有用的毫无疑问的就是onLoad()处理程序了，它会在完成图像加载的时候被调用。这个处理程序可以与自定义的函数一起使用，以便在完成图像加载之后进行特定的任务。下面的例子通过在图像加载的时候显示“请等待（please wait）”提示信息来说明这个问题，然后在图像完成加载之后就向浏览器发送一个新的URL。
< html >< head >< script language ="JavaScript" > // create an image objectobjImage = new Image(); // set what happens once the image has loaded objImage.onLoad=imagesLoaded(); // preload the image fileobjImage.src='http://www.host01.com/Get/jsp/00040004/images/image1n.gif';// function invoked on image loadfunction imagesLoaded(){ document.location.href='index2.html';}</script></head><body>Please wait, loading images</body></html>
当然，你还可以创建一个图像数组，对它进行循环，预加载每个图像，并在每个阶段对已加载图像的数量保持跟踪。一旦加载了所有的图像，事件处理程序就能够按照设定把浏览器带到下一个页面（或者进行其他的任务）。
预加载与多状态菜单
现在，把你刚刚学到的理论付诸真正的实践怎么样？下面一部分内容就是我碰巧编写的一段代码——一个由多个按钮（图像链接）组成的菜单条——其中每个按钮都可能处于三种状态中的一种：正常（normal）、hover（悬停）和点击（click）。由于所有的按钮都有多个状态，所以就有必要使用图像预加载来确保菜单能够根据其切换到的状态进行快速的响应。列表A里的代码就说了这一点。
列表A里的HTML代码会建立一个由四个按钮组成的菜单条，每个按钮都有三种状态：正常、悬停和点击。其要求如下：
但鼠标移动到处于正常状态的按钮上时，按钮会变为悬停状态。当鼠标移开的时候，按钮又会恢复到正常状态。当鼠标点击按钮的时候，按钮就会变为点击状态。它会一直保持这个状态，直到另外一个按钮被点击。如果有一个按钮被点击，那么其他的按钮就都不能处于点击状态。其他的按钮只能够处于悬停或者正常状态。一次只能有一个按钮可以被点击。一次只能有一个按钮处于悬停状态。
第一项任务是建立保存有菜单每个状态的图像的数组。与这些数组元素相对应的<img>元素也都在HTML文档的主体里被创建，并按顺序命名。要注意的是，对数组值的索引是从0开始的，而相应的<img>元素是从1开始命名的——这就需要在脚本后面的一段里进行某种计算上的调整。
PreloadImages()函数会负责把所有的图像都加载到缓冲区里，这样的话对鼠标移动的响应时间会被减到最小。一个for()循环被用在第一步里创建的图像里进行迭代，并预加载每一个图像。
ResetAll()函数是把所有图像恢复都到它们正常状态的方便方法。这是有必要的，因为当菜单的项目被点击的时候，菜单里其他所有的项目都必须在被点击项目能够切换到点击状态之前恢复到正常状态。
SetNormal()、setHover()和setClick()函数负责把特定图像（图像的编号被作为函数的自变量进行传递）的来源分别改为正常、悬停或者点击状态。由于被点击的图像必须一直保持点击状态，直到另外一个图像被点击（见第二项要求），所以它们暂时不会对鼠标移动作出反应；这样的话，如果按钮还不是处在点击状态，那么setNormal()和setHover()函数所包括的代码就只能用来改变按钮的状态。
上面所提到的预加载只是提高你JavaScript效果响应时间的多种方法之一。就在你的网站上使用上面列出的技巧，并根据你的要求在需要的地方更改它们吧。祝你好运！
分享到：
相关推荐
2. **异步预加载**：通过JavaScript创建`Image`对象并设置其`src`属性，这样可以在后台加载图片，不会阻塞页面渲染。例如： ```javascript var img = new Image(); img.src = 'path/to/image.jpg'; ``` 3. **...
`images`文件夹自然存放了需要预加载的图片，而`js`文件夹可能包含了`jQuery`库和上述预加载函数的JavaScript代码。 预加载策略并不止于简单地逐个加载所有图片。对于大图或者数量众多的图片，可以采用分批加载、懒...
JavaScript中，我们可以创建一个新的`Image`对象，并设置其`src`属性为要预加载的图片URL。例如： ```javascript function preloadImage(url) { var img = new Image(); img.src = url; } preloadImage('path/to/...
<img id="preload-image" src="image-not-loaded.jpg" alt="预加载图片"> $(function() { // 预加载图片 $.preload(['image1.jpg', 'image2.jpg', 'image3.jpg']); // 当图片预加载完成后，可以执行某些...
- JavaScript预加载：使用JavaScript创建新的`Image`对象，并设置其`src`属性为需要预加载的图片URL。例如： ```javascript var img = new Image(); img.src = 'path/to/image.jpg'; ``` - HTML `<link>`标签...
大量采用高解析度的图像的确可以让一个Web站点容光焕发。但同样也会造成站点访问速度下降——图片是文件，文件就要占用带宽，而带宽直接同访问... Image()对象 最简单的图像预装载办法是使用JavaScript新建一个新的Im
<img data-src="path/to/real-image.jpg" src="path/to/placeholder.gif" alt="预加载图片"> ``` 3. 初始化插件：在jQuery的$(document).ready()函数中调用$.fn.lazyload()方法，进行初始化配置。 ```javascript $...
事件加载和预加载是JavaScript优化用户体验的关键技术。本文将深入探讨这两个概念，并提供相关实践策略。 首先，我们来理解“事件加载”。在网页中，事件是指用户与页面交互时发生的事情，比如点击按钮、滚动页面等...
JS 实现图片预加载可以通过使用 Image 对象来实现图片的预下载，并且可以结合容器的宽和高，按照一定的缩放比例使图片显示出来。 在实现图片预加载时，需要考虑到图片的宽和高，这可以通过 Image 对象的 width 和 ...
在这个函数中，`imgArray` 是包含要预加载图片URL的数组，我们为每个URL创建一个新的`Image`对象，并设置其`src`属性，从而触发图片的下载。 接着，我们讨论延迟加载（Lazy Loading）。延迟加载是一种优化策略，它...
现在，让我们深入探讨JavaScript中Image对象的使用方法以及如何高效地进行图片预加载处理。 首先，Image对象可以被创建为一个新的实例，这样就可以在不显示于HTML文档中时预读图片。创建方式很简单，可以使用var...
**jQuery实现图片预加载** 在Web开发中，用户体验是一个至关重要的因素，而图片加载速度直接影响着用户对网站的第一印象。为了提升用户体验，开发者通常会采用图片预加载技术，确保图片在用户需要时能够快速显示。...
首先，我们需要创建一个JavaScript函数来处理预加载任务。这个函数会遍历图片列表，为每张图片创建一个新的`Image`对象，然后将图片的URL设置为`src`属性。这样，浏览器就会在后台开始下载这些图片，而不会阻塞其他...
2. **定义图片列表**：创建一个JavaScript数组，存储需要预加载的图片URL。 ```javascript var imagesToPreload = ['image1.jpg', 'image2.jpg', 'image3.jpg']; ``` 3. **预加载函数**：编写一个函数，用于处理图片...
preloadjs 是一款强大的JavaScript库，专为实现资源预加载而设计，包括图片、音频、字体等。在本文中，我们将深入探讨preloadjs的功能、使用方法以及其在实际项目中的应用。 ### 1. preloadjs 简介 preloadjs 是由...
JavaScript图片预加载是一种优化网页性能的技术，特别是在网页中包含大量图片或者有动态加载图片需求时。这种方法通过在用户实际查看图片之前，提前加载图片资源，减少用户等待时间，提升用户体验。这里我们将深入...
jQuery是一款广泛使用的JavaScript库，它提供了丰富的API和插件，使得实现图片预加载变得简单。以下是一个基本的预加载插件的实现步骤： 1. 引入jQuery库：在HTML文件中，你需要首先引入jQuery库，可以通过CDN链接...
- **异步加载**：利用JavaScript创建Image对象，设置图片URL，并监听其`onload`事件，当图片加载完成后触发事件处理函数。 - **利用CSS背景图像**：通过CSS设置元素的背景图像为待加载图片，浏览器会在渲染页面时...
JavaScript图片预加载可以分为不同的方式，其中最常见的是使用JavaScript来创建一个Image对象，并将其src属性设置为要加载的图片地址，这种方式可以异步地下载图片而不会影响页面其他元素的加载。 在上述给出的实例...
在微信小程序的开发中，图片预加载是一种优化用户体验的重要技术，尤其对于图片密集型的应用，如电商、社交或游戏类小程序。"wxapp-preload"是专门为微信小程序设计的一个图片预加载解决方案，它能帮助开发者在用户...