Question

关于图片预加载的问题,高分求助

初学ASP，正在试做一个商城，首页循环出来的商品图片很多，为了解决图片大而影响页面加载速度的问题，已生成缩略图，由于主机速度不咋地，想做个图片预加载的功能，参考了网上不少资料，还是无从下手,求助高手

或者有现成的JS类给一个，我需要前台调用简单，类似Loadimg("imgUrl","ALT属性",长度，宽度)

其实我手上有个代码，第一执行图片成功加载，第二次由于缓存已存在此图片而导致图片加载不了，我把代码贴出来，麻烦大家帮我看看
ImageLoader=function(){
//自定义的<a href="http://www.xitongwang.com" target="_blank">系统</a>参数，保存指定的Image对象
if (!window.imageLoaders)
window.imageLoaders={};
//将所有列表中的图片默认隐藏,在系统加载完毕后立即执行，不过opera的加载机制似乎与ie和ff不同，它会等所有图片都加载完才执行onload，所以这些代码实际作用不大...
window.hideImage=function(){
for (a in window.imageLoaders)document.getElementById(a).style.display='none';
}
if (document.all)
window.attachEvent("onload",window.hideImage);
else
window.addEventListener('load',window.hideImage,false);
//兼容ff，ff底下没有readyState参数，在开始事件中设置document.readyState来模拟ie的效果
if (!document.all)
window.addEventListener('load',function(){document.readyState='complete'},false)
//自定义的图片加载方法
window.imageComplete=function(i){
var obj=window.imageLoaders[i];
clearInterval(obj.timer);
var mw=obj.maxWidth;
var mh=obj.maxHeight;
var id=obj.uid;
var img=document.getElementById(id);
if (!img){
img=document.createElement("img");
img.style.display='none';

img.setAttribute('id',id);
document.body.appendChild(img);
}
if (obj.width>obj.height)
if (mw>0)
if (obj.width>mw)
img.width=mw;
else
if (mh>0)
if (obj.height>mh)
img.height=mh;
img.src=obj.src;
img.alt=obj.alt;
img.style.display='';
window.imageLoaders[i]=null;
}
//加载图片方法，如果id不提供，或者为false，将直接插入一个img
this.loadImage=function(url,alt,maxWidth,maxHeight,id,callback){
var imgObj=new Image();
imgObj.src=url;
imgObj.uid=id;
imgObj.alt=alt;
imgObj.maxWidth=maxWidth;
imgObj.maxHeight=maxHeight;
if (!id){
imgObj.uid='img_sheneyan_'+Math.random()*100;
/*hutia的写法：
document.write(String.fromCharCode(60)+"img src='' id='"+imgObj.uid+"'/"+String.fromCharCode(62))*/
/*mirycat的写法：前后加CDATA*/
document.write("<img src='' id='"+imgObj.uid+"'/>")
}
window.imageLoaders[imgObj.uid]=imgObj;
imgObj.onload=function(){
window.imageLoaders[this.uid].timer=setInterval("if (document.readyState=='complete'){window.imageComplete('"+this.uid+"');}",500);
}
imgObj.onerror=function(){window.status='加载'+src+'失败';}
}

}
var ii=new ImageLoader();

调用：
<script type="text/javascript">
ii.loadImage("<%=Rs("读出的IMG途径")%>",'alt属性',547,51)
</script>

Answer 1

“第一执行图片成功加载，第二次由于缓存已存在此图片而导致图片加载不了”，如果想解决此问题，提供一个简便的方法：在图片的URL后面加一个参数 img.src+"?t="+(new Date()); 即可

追问

这样一来每次打开页面都要加载一次，是不是得不偿失了

追答

给你一个参考思路：
先将 Rs("读出的IMG途径")存入一个数组 imagePaths，然后在页面加入下列代码：
var imagePaths=new Array();
var alts=new Array();
//此处加入将图片路径存入数组imagePaths的ASP代码
//......
function loadImage(){
var imgObj=new Image();
var imageHTML="";
for(var i=0;i";
}
document.getElementById("images").innerHTML=imageHTML;//预先创建一个显示所有图片的DIV放在页面响应的位置,id="images"
}

document.onload=loadImage;

这样可以先完成页面的加载和渲染，然后逐一加载图片，不影响页面的显示

Answer 2

第一执行图片成功加载，第二次由于缓存已存在此图片而导致图片加载不了?怎么会？，预加载的目的，就是在正式使用前先调用图片，缓存下来。 等到用的时候，从缓存中提取。

追问

事实确实如此，应该有个判断缓存是否存在的机制
可惜我不会写

追答

不需要，浏览器会自动检查缓存，如果内容不存在，再请求服务器重新发送，如果存在，它就直接调用显示了。

Answer 3

第一执行图片成功加载