网站开发时经常需要在某个页面需要实现对大量图片的浏览，如果考虑流量的话，大可以像pconline一样每个页面只显示一张图片，让用户每看一张图片就 需要重新下载一下整个页面。不过，在web2.0时代，更多人愿意用javascript来实现一个图片浏览器，让用户无需等待过长的时间就能看到其他图 片。
知道了一张图片的地址，需要把它在一个固定大小的html容器（可以是div等）里边显示出来，最重要的当然是需要知道这张即将显示的图片的宽和高，然后再结合容器的宽和高，按照一定的缩放比例使图片显示出来。因此，实现图片预加载就成为图片浏览器的核心功能了。
做过图片翻转效果的朋友其实都知道，要让图片轮换的时候不出现等待，最好是先让图片下载到本地，让浏览器缓存起来。这时，一般都会用到js里边的Image对象。一般的手段无非这样：
function preLoadImg(url) {
var img = new Image();
img.src = url;
}
通过调用preLoadImg函数，传入图片的url，就能使图片预先下载下来了。实际上，这里用到的预下载功能也和这基本一致。图片预下载下来后，通过 img的width和height属性，就能知道图片的宽和高了。但是需要考虑到，在做图片浏览器功能时，图片都是实时显示的。比如你点了显示的按钮，这 个时候才会调用上边类似的代码来加载图片。因此，如果你直接用img.width的时候，图片还没有完全下载下来。因此，需要用一些异步的方法，等到图片 下载完毕的时候才会再对img的width和height进行调用。
实现这样的异步方法实际上不难，图片的下载完毕事件也很简单，就是简单的onload事件。因此，我们可以写出下面的代码：
function loadImage(url, callback) {
var img = new Image();
img.src = url;
img.onload = function(){ //图片下载完毕时异步调用callback函数。
callback.call(img); // 将callback函数this指针切换为img。
};
}
好了，再来写一个测试用例。
function imgLoaded(){
alert(this.width);
}
<input type="button" value="loadImage" onclick="loadImage('aaa.jpg',imgLoaded)"/>
在firefox中测试一下，发现不错，果然和预想的效果一样，在图片下载后，就会弹出图片的宽度来。无论点击多少次或者刷新结果都一样。
不过，做到这一步，先别高兴太早——还需要考虑一下浏览器的兼容性，于是，赶紧到ie里边测试一下。没错，同样弹出了图片的宽度。但是，再点击load的时候，情况就不一样了，什么反应都没有了。刷新一下，也同样如此。
经 过对多个浏览器版本的测试，发现ie6、opera都会这样，而firefox和safari则表现正常。其实，原因也挺简单的，就是因为浏览器的缓存 了。当图片加载过一次以后，如果再有对该图片的请求时，由于浏览器已经缓存住这张图片了，不会再发起一次新的请求，而是直接从缓存中加载过来。对于 firefox和safari，它们视图使这两种加载方式对用户透明，同样会引起图片的onload事件，而ie和opera则忽略了这种同一性，不会引 起图片的onload事件，因此上边的代码在它们里边不能得以实现效果。
怎么办呢？最好的情况是Image可以有一个状态值表明它是否已经载入成功了。从缓存加载的时候，因为不需要等待，这个状态值就直接是表明已经下载了，而从http请求加载时，因为需要等待下载，这个值显示为未完成。这样的话，就可以搞定了。
经过一些分析，终于发现一个为各个浏览器所兼容的Image的属性——complete。所以，在图片onload事件之前先对这个值做一下判断即可。最后，代码变成如下的样子：
function loadImage(url, callback) {
var img = new Image(); //创建一个Image对象，实现图片的预下载
img.src = url;
if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
callback.call(img);
return; // 直接返回，不用再处理onload事件
}
img.onload = function () { //图片下载完毕时异步调用callback函数。
callback.call(img);//将回调函数的this替换为Image对象
};
};
经过这么一番折腾，总算是让各个浏览器都能满足我们的目标了。虽然代码很简单，但是却把图片浏览器中最核心的问题解决掉了，接下来你所要做的，仅仅是图片如何呈现的问题了接下来看看另外一种方法：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js 实现图片预加载 加载完后执行动作</title>
</head>
<style type="text/css">
<!--
*html{
margin:0;
padding:0;
border:0;
}
body{border:1px solid #f3f3f3; background:#fefefe}
div#loading{
width:950px;
height:265px;
line-height:265px;
overflow:hidden;
position:relative;
text-align:center;
}
div#loading p{
position:static;
+position:absolute;
top:50%;
vertical-align:middle;
}
div#loading p img{
position:static;
+position:relative;
top:-50%;left:-50%;
vertical-align:middle
}
-->
</style>
<div id="loading">
<p><img src="http://www.baidu.com/img/baidu_logo.gif" /></p>
</div>
<script>
var i=0;
var c=3;
var imgarr=new Array
imgarr[0]="http://www.baidu.com/img/baidu_logo.gif";
imgarr[1]="http://img.baidu.com/img/logo-img.gif";
imgarr[2]="http://img.baidu.com/img/logo-zhidao.gif";
var Browser=new Object();
Browser.userAgent=window.navigator.userAgent.toLowerCase();
Browser.ie=/msie/.test(Browser.userAgent);
Browser.Moz=/gecko/.test(Browser.userAgent);
function SImage(url,callback)
{
var img = new Image();
if(Browser.ie){
img.onreadystatechange =function(){
if(img.readyState=="complete"||img.readyState=="loaded"){
ii=i+1;
callback(i);
}
}
}else if(Browser.Moz){
img.onload=function(){
if(img.complete==true){
ii=i+1;
callback(i);
}
}
}
img.src=url;
}
function icall(v)
{
if(v<c){
SImage(""+imgarr[v]+"",icall);
}
else if(v>=c){
i=0;
//location.replace('banner.html');//这里写自己的动作吧，
}
}
相关推荐
预加载的关键在于预测用户下一步可能访问的图片，并提前加载这些图片到本地缓存中，以便于当用户实际访问时能够立即展示，无需等待网络传输时间。 #### 二、JavaScript实现图片预加载的技术原理 在JavaScript中...
本文将深入探讨“图片预加载js”这一主题，包括预加载的原理、实现方式以及如何使用JavaScript来优化这个过程。 一、图片预加载的原理 图片预加载是指在用户实际看到图片之前，提前将图片数据加载到浏览器的缓存中...
预加载使得用户在查看图片时无需等待，从而提升页面的响应速度。 首先，让我们理解什么是图片预加载。预加载是一种策略，通过在用户实际点击或滚动到图片之前提前下载图片，来减少加载时间。这尤其适用于那些在用户...
### JavaScript 实现图片预加载与懒加载技术解析 #### 一、引言 在现代Web开发中，优化页面加载速度及提升用户体验是非常重要的环节。图片作为网页内容的重要组成部分，其加载方式直接影响着整个页面的性能表现。...
jQuery预加载插件的工作原理是，创建`<img>`元素并设置其`src`属性为需要加载的图片URL，浏览器会自动开始下载图片，而无需等待其他脚本执行完毕。 这个特定的jQuery插件可能提供了以下特性： 1. **批量预加载**：...
在网页设计中，图片预加载是一项重要的优化...通过以上方法，你可以有效地使用JavaScript和jQuery实现图片预加载，并监控加载状态，为用户提供更流畅、快速的浏览体验。在实际项目中，可以根据具体需求进行调整和优化。
在网页设计中，图片预加载是一项重要的技术，它允许开发者在用户查看页面之前预先加载一些关键的图片资源，从而提高用户体验，减少用户等待时间。在JavaScript中，我们可以使用简单的代码来实现这一功能。这里我们将...
无需对HTML代码进行任何改动，只需在JavaScript中调用LoadImage函数，即可实现图片的预加载。这为开发者提供了极大的便利，尤其适用于那些已经有大量HTML代码的项目，不需要进行大规模重构。 以下是使用jQuery ...
3. **页面逻辑脚本**：可能包含处理页面交互和预加载逻辑的自定义JavaScript代码，如监听页面加载事件，控制预加载进度等。 **fonts**文件夹通常包含页面所需的字体资源，可能是Web字体，使得网页可以使用特殊字体...
Struts预加载数据的实现是Web开发中一种提高用户体验的技术，尤其在大数据量或复杂页面加载时，可以分批次提前获取部分数据，减轻用户等待时间。在这个“struts 预加载数据demo”中，我们将深入探讨如何使用Struts2...
2. JavaScript预加载：通过JavaScript动态创建图片元素，并设置其src属性值。图片加载完成后再将图片元素添加到页面中。 3. HTML预加载：通过在HTML中添加img标签，但不设置其src属性，然后通过JavaScript设置src来...
传统的预加载方式通常依赖于JavaScript，但今天我们将探讨如何利用纯CSS实现图片预加载，从而摆脱对JavaScript的依赖。 ### 为什么需要图片预加载？ 在网页中，当用户滚动页面时，如果图片没有预先加载，可能会...
纯JavaScript预加载方法可以更灵活控制预加载过程。例如，可以创建一个Image对象数组，然后遍历预加载的图片URL列表，如下所示： ```javascript var images = []; function preload() { for (i = 0; i ; i++) { ...
预加载可以分为无序预加载和有序预加载，无序预加载需要等待所有图片加载完成后才能进行后续操作，而有序预加载则允许加载完第一张图片后就立即加载第二张、第三张等，使图片的加载更加顺畅。 文章还提到了进度条的...
`jQuery LoadImage`插件就是为了解决这个问题而诞生的，它提供了一种简单易用的方法来预先加载网页中的图片资源，确保用户在浏览时无需等待图片加载，从而提升网站的响应速度和交互体验。 `jQuery LoadImage`的核心...
开发者可以根据实际需求，选择适合的预加载动画，并通过JavaScript（标签中提到的JS特效）来控制加载动画的显示和隐藏，确保在页面内容完全加载后自动消失。 总的来说，CSS3预加载Loading动画特效是提升网页性能和...
1. **JavaScript实现**：使用 Ajax 请求提前加载数据，或者使用 `link` 标签预加载图片、CSS、字体等资源。 2. **HTML5 Prefetch 和 Prerender**：`<link rel="prefetch">` 提前获取资源，`<link rel="prerender">` ...
【描述】中的"圆球弹性预加载动画特效"意味着这个代码实现了由多个圆形元素组成的动态加载效果，这些圆形元素具有弹性的运动轨迹，为用户提供一种动态且引人入胜的等待体验。CSS3是层叠样式表（Cascading Style ...