javascript图片浏览器的核心——图片预加载
javascript图片浏览器的核心——图片预加载
2009-04-06 10:57
网站开发时经常需要在某个页面需要实现对大量图片的浏览，如果考虑流量的话，大可以像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',img
相关文档：
1.Text 单行单列输入元素
功能：对Text标识中的元素实施有效的控制
基本属性：
Name：设定提交信� ......
继承机制，说到继承，就要想到从基类开始，但是JavaScript中的类有两大类：一，内嵌的；二，用户自定义；一般前者不会被用来做基类，原因是为了保障js的安全。但是我们可以通过prototype来对基类进行扩充，增加我们想要的属性和方法。以下是自己对继承的几种方式的理解。
1> 对象 ......
FusionChart 就不用介绍了把，一款支持多种语言的图表生成控件，生成的图表丰富，美观，且有动态感，因为它生存的东西就是一个flash。一下介绍一下它的javascript 实现方式把。
废话少说，直接上实例
<HTML>
<HEAD>
<SCRIPT LANGUAGE="Javascri ......
