onload做.改成:
<body onload="display_img()">后,效果和用:setTimeout("display_img()",10);
一样了.显示是第一次也有图片显示出来,不过图片显示是在一个新的HTML中了.(另外,我上面的说的图片第一次不出来,也不是每次都第一次不出来,例如一些小的图片,容量很小的图片,就第一次点击链接也出来,但大一点的图片,90%的在第一次点击的时候都不出来,硬要等到点第二次链接,不过只是显示了一次以后,以后就正常了,以后就只要点击一次图片就显示出来了)
<body onload="display_img()">后,效果和用:setTimeout("display_img()",10);
一样了.显示是第一次也有图片显示出来,不过图片显示是在一个新的HTML中了.(另外,我上面的说的图片第一次不出来,也不是每次都第一次不出来,例如一些小的图片,容量很小的图片,就第一次点击链接也出来,但大一点的图片,90%的在第一次点击的时候都不出来,硬要等到点第二次链接,不过只是显示了一次以后,以后就正常了,以后就只要点击一次图片就显示出来了)
<script language="javascript">
<!--
function DrawImage(ImgD)
{
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= 450/300){
if(image.width>450){
ImgD.width=450;
ImgD.height=(image.height*450)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
else{
if(image.height>300){
ImgD.height=300;
ImgD.width=(image.width*300)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
///* *这是第一种处理方法,直接将该图片在这个方法中画出来.
document.write("<img id=s_a1 name=s_a1 src='' width='' height=''>");
document.all("s_a1").src=ImgD.src
document.all("s_a1").width=ImgD.width
document.all("s_a1").height=ImgD.height
//*/
return(ImgD);
} return (ImgD);
} a.src ="http://expert.csdn.net/images/jspd_wdzx_sqgg_ad.gif";
var myIMG = new DrawImage(a);
//-->
</script>这样没有问题哦
加了NEW后,效果还是一样.各位老兄,你们做这种点击显示图片,让图片按一定的比例显示是如何做的了?
<script language="javascript">
function DrawImage(ImgD)
{
var image=document.all("a");
//alert(ImgD);
image.src=ImgD;
if(image.width/image.height>= 450/300){
// 太宽
alert("ccc");
if(image.width>450){
image.width=450;
image.height=(image.height*450)/image.width;
}else{
image.width=image.width;
image.height=image.height;
}
}
else{ //不太宽
//alert("bbb");
if(image.height>300){
//alert("ddd");
image.height=300;
image.width=(image.width*300)/image.height;
}else{
image.width=image.width;
image.height=image.height;
}
} return(image);
}
</script><br>
<input type="button" name="B6" value="图片" onclick="DrawImage('11.jpg')">
a.src ="<%=Server.URLEncode(path2)%>";
myIMG = new DrawImage(a);
function fnCreate(){
oData.innerHTML="";
var html_txt = "<img src ='<%=server.URLEncode(path2)%>'>";
var aElement=document.createElement(html_txt);
aElement.width = myIMG.width;
aElement.height = myIMG.height;
oData.appendChild(aElement);
form1.load_info.value='';
form1.load_info.style.width='0px';
}
fnCreate();在上面代码中,DrawImage()这个方法中的注释部分不用了,即不用document.write那部分了.改成了上面后,图片还是有时第一次不显示出来,硬要到第二次以后才显示出来.这究竟是怎么回事了?
第二次打开的时候，浏览器因为cache的原因已经知道图片的大小。我看你的程序是ASP的，因此可以考虑预先得到图片的大小，写成如下的形式：<img id="a" width="400", height="300">
这样的话在你打开页面后，就会下载所有图片~~~你再点BUTTON就不会有延迟了~~~
不过打开页面可能时间会比较长~~
function fnCreate(){
oData.innerHTML="";
var html_txt = "<img src ='<%=server.URLEncode(path2)%>'>";
var aElement=document.createElement(html_txt);
aElement.width = myIMG.width;
aElement.height = myIMG.height;
oData.appendChild(aElement);
form1.load_info.value='';
form1.load_info.style.width='0px';
}
//fnCreate();
function fnCreate(){
oData.innerHTML="";
var html_txt = "<img src ='<%=server.URLEncode(path2)%>'>";
var aElement=document.createElement(html_txt);
aElement.width = myIMG.width;
aElement.height = myIMG.height;
oData.appendChild(aElement);
form1.load_info.value='';
form1.load_info.style.width='0px';
}
//fnCreate();
//改成:
setTimeout("fnCreate()",50);
--------
正像 mikespook(Mike大懒猫) 说的一样，载入的时候图片并不显示出来，而在载入之后立即改变图片的尺寸并使其可见(visibility属性)，
---------
一开始就全部载入图片在我的程序中是不现实的,我这是一个图片查看的程序,在开始的时候是不知道要多少图片的,图片的路径存在数据库中,图片存在目录中,也许有时图片有几十张,而且我左右分框架,左边是图片名的链接.左边又是一个树型结构,点击的节点不同,图片的内容又完全不同.所以一开始就装载是不行的.
试了很久后,我终于找到一种暂时可以解决的方法了,在那个方法中无限循环,如果高宽还没得到,就继续调用,直到有高宽了为止.不知会不会出什么问题.
function fnCreate(){
var i_count = 0;
var is_continue = true;
oData.innerHTML="";
var html_txt = "<img src ='<%=server.URLEncode(path2)%>'>";
var aElement=document.createElement(html_txt);
while(is_continue){
i_count++;
aElement.width = myIMG.width;
aElement.height = myIMG.height;
if(aElement.width != 0 && aElement.height !=0){
is_continue = false;
}else{
myIMG = DrawImage(a);
}
}
window.status = i_count;
oData.appendChild(aElement);
form1.load_info.value='';
form1.load_info.style.width='0px';
}
setTimeout("CreateImg()",10);这样一来,图片大一点的,我看到第一次点图片的时候,有的那个循环数居然有600多次!
去年我就碰到这样的问题,也是个图片查看软件,你可以试试这样的方法,定义一个隐藏的内部IFRAME,该IFRME就是用来导入图片的,在主页面触发IFRAME导入图片,在IFRAME中的ONLOAD事件来触发主也面的的变化,在这时候因为图片都已经完全导入,那么图片的大小什么的都已经可以获取了,其他的自适应大小,不是非常容易了吗?而且这样还可以有完整的系统状态显示,等于就是后台导入,也有更好UI交互功能.
我的项目就是这样的方案,客户反映都非常好,而且图片显示就是适应大小.
老兄能否给点代码看看?谢谢