为什么显示时,每张图片一开始会变很宽,然后过1-2秒才正常。求高手解答
为什么显示时,每张图片一开始会变很宽,然后过1-2秒才正常。
程序中是有个压缩图片的过程,如800*533会压为255*166,
从左到右的滚动,滚动区的高是300,宽是1024,每张,图会一开始变很宽,我想一开始就是压缩图片的格式
<script language="JavaScript">
<!--
var flag=false;
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>= 105/80){
if(image.width>105){
ImgD.width=250;
ImgD.height=(image.height*250)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt="点击查看详细信息...";
}
else{
if(image.height>80){
ImgD.height=250;
ImgD.width=(image.width*250)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt="点击查看详细信息...";
}
}
}
//-->
</script>
<%
Const Photo_img=6
set rs_Photo=server.createobject("adodb.recordset")
sqltext="select top " & Photo_img & " * from Photo where Passed=True and Newproduct=true order by UpdateTime desc"
rs_Photo.open sqltext,conn,1,1
if not rs_Photo.EOF then%>
<div align='center' id='demo0' style='overflow:hidden;height:300px;width:1004px'><!--滚动区-->
<table align='center' cellpadding='0' cellspace='0' border='0'>
<tr>
<td id='demo11' valign='top'>
<%
while not rs_Photo.EOF
fileExt=lcase(getFileExtName(rs_Photo("DefaultPicUrl")))
%>
<td align='center'>
<TABLE width="100%" border=0 align=center cellPadding=0 cellSpacing=0>
<TR>
<TD width="815" height="200" align="center" bgcolor="#E9E9E9">
<a href='PhotoShow.asp?ID=<%=rs_Photo("ID")%>' target=_blank title='<%=rs_Photo("title")%>'>
<%if fileext="jpg" or fileext="bmp" or fileext="png" or fileext="gif" then%>
<img src="<%if rs_Photo("DefaultPicUrl")="" then%>Img/nopic.gif<%else%><%=rs_Photo("DefaultPicUrl")%><%end if%>" alt="<%=rs_Photo("title")%>" width="815" height="200" border="0" onload="javascript:DrawImage(this);">
<%else
if fileext="swf" then%>
<%end if
end if%></a>
</TD>
<TD colspan=3 align=center height=50 valign='top'>
<a href='PhotoShow.asp?ID=<%=rs_Photo("ID")%>' target=_blank title='<%=rs_Photo("title")%>'><%=cutstr(rs_Photo("title"),50)%></a>
</TD>
<TD> </TD>
</TR>
</TABLE>
</td>
<%
rs_Photo.MoveNext
wend
%>
</tr>
</table>
</td>
<td id=demo22 valign=top></td>
</tr>
</table>
</div>
<%if Photo_img >5 then%>
<script>
var Picspeed1=5
demo22.innerHTML=demo11.innerHTML
function Marquee2(){
if(demo22.offsetWidth-demo0.scrollLeft<=0)
demo0.scrollLeft-=demo11.offsetWidth
else{
demo0.scrollLeft++
}
}
var MyMar2=setInterval(Marquee2,Picspeed1)
demo.onmouseover=function() {clearInterval(MyMar2)}
demo.onmouseout=function() {MyMar2=setInterval(Marquee2,Picspeed1)}
</script>
<%end if
else
Response.Write "暂 无 "
end if
%>
[解决办法]
像这种最好是用缩略图显示,不要用大大的原图显示,不然网页打开慢的时候就会出现你这种情况
还有就是img你没有定义宽度和高度或者设定了过高的宽度和高度了,只是利用JS来改变了宽度和高度了吧
果然你的程序是用
<img src="<%if rs_Photo("DefaultPicUrl")="" then%>Img/nopic.gif<%else%><%=rs_Photo("DefaultPicUrl")%><%end if%>" alt="<%=rs_Photo("title")%>" width="815" height="200" border="0" onload="javascript:DrawImage(this);">
一开始的宽度就是815了,那当然是815了,在没有执行DrawImage(this之前,显示的宽度当然是815了
所以我建议使用缩略图形式