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
相关文档：
最短的拖动代码
<!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" />
<script l ......
1.document.formName.item("itemName") 问题
说 明:IE下,可以使用document.formName.item("itemName")或document.formName.elements ["elementName"];Firefox下,只能使用document.formName.elements["elementName"].
解决方法:统一使用document.formName.elements["elementName"].
2.集合类对象问题
说明:IE下,可以 ......
解决Firefox 下F5和IE下F5 不一致的javascript 脚本.
var check=function(e)
{
e=e||window.event;
//alert(e.which||e.keyCode);
if((e.which||e.keyCode)==116)
{
if(e.preventDefault)
{ e.preventDefault();}
&nb ......
keycode 0 =
keycode 1 =
keycode 2 =
keycode 3 =
keycode 4 =
keycode 5 =
keycode 6 =
keycode 7 =
keycode&nb ......
Array作为JavaScript的一个内置对象，有着强大的功能；相对于其他内置对象来说，他有着特殊的用法，下面对说说自己对Array的用法的一个小总结：
1>用途一：数组
数组最大存储数据为四十多亿个，这个空间足够用了，所以数组可以随便的扩容。下面对常用� ......
