在显示的时候JS控制图片大小(宽度,高度),页面有3个按钮A B C 一个图片显示 img
比如点A 显示图片 A.JPG 点B 显示图片 B.JPG 点C 显示图片C.jpg
现在问题是第一次访问这张图片时都不会显示,要刷新下或访问后再访问才会显示。
(不用JS控制的话第一次访问也可以显示)
上网搜资料还是找不到问题。清空缓存也没用~
个人感觉原因:
可能是点击更换图片SRC时图片还没加载进来,所以不显示;
JS代码有问题;
....
请各位支个招,怎么解决啊?function view(){
var $img = new Image();
var x = document.getElementById("img4");
$img.src = x.src;
var $w, $h, wContainer, hContainer;
wContainer = 200;
hContainer = 200;
$w = $img.width;
$h = $img.height;
if ($w > wContainer) {
$h = $h * (wContainer / $w);
$w = wContainer;
if ($h > wContainer) {
$w = $w * (hContainer / $h);
$h = hContainer;
}
} else if ($h > hContainer) {
$w = $w * (hContainer / $h);
$h = hContainer;
if ($w > wContainer) {
$h = $h * (wContainer / $w);
$w = wContainer;
}
}
x.style.width = $w;
x.style.height = $h;
}
比如点A 显示图片 A.JPG 点B 显示图片 B.JPG 点C 显示图片C.jpg
现在问题是第一次访问这张图片时都不会显示,要刷新下或访问后再访问才会显示。
(不用JS控制的话第一次访问也可以显示)
上网搜资料还是找不到问题。清空缓存也没用~
个人感觉原因:
可能是点击更换图片SRC时图片还没加载进来,所以不显示;
JS代码有问题;
....
请各位支个招,怎么解决啊?function view(){
var $img = new Image();
var x = document.getElementById("img4");
$img.src = x.src;
var $w, $h, wContainer, hContainer;
wContainer = 200;
hContainer = 200;
$w = $img.width;
$h = $img.height;
if ($w > wContainer) {
$h = $h * (wContainer / $w);
$w = wContainer;
if ($h > wContainer) {
$w = $w * (hContainer / $h);
$h = hContainer;
}
} else if ($h > hContainer) {
$w = $w * (hContainer / $h);
$h = hContainer;
if ($w > wContainer) {
$h = $h * (wContainer / $w);
$w = wContainer;
}
}
x.style.width = $w;
x.style.height = $h;
}
我发布的服务器上面也会出现这个问题,并不是我个人测试会出现这个问题。。
你说的JS图片预载功能怎么实现,能说具体点吧?或代码发点出来看下。
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle" align="center" >
<img id="img4" src='/uploadfiles/businessinfoimages/<%#Eval("pic1_") %>' onclick=" Cerimg()"
onerror="this.style.display='none';" onload="view()" alt='<%#Eval("name") %>' />
<br /><font onclick="Cerimg()" >点击浏览大图</font></td>
<td width="100px"><table width="100%" border="0" style="cursor:hand;" cellspacing="0" cellpadding="0">
<tr style="padding-top:5px; padding-bottom:5px;" >
<td><img id="img1" src='/uploadfiles/businessinfoimages/<%#Eval("pic1_small") %>' class="dk"
onclick="javascript:document.getElementById('img4').src = '/uploadfiles/businessinfoimages/<%#Eval("pic1_") %>';"
onerror="this.style.display='none';" alt='浏览大图' /></td>
</tr>
<tr style="padding-top:5px; padding-bottom:5px;">
<td><img id="img2" src='/uploadfiles/businessinfoimages/<%#Eval("pic2_small") %>' class="dk"
onclick="javascript:document.getElementById('img4').src = '/uploadfiles/businessinfoimages/<%#Eval("pic2_") %>';"
onerror="this.style.display='none';" alt='浏览大图' /></td>
</tr>
<tr style="padding-top:5px; padding-bottom:5px;">
<td><img id="img3" src='/uploadfiles/businessinfoimages/<%#Eval("pic3_small") %>' class="dk"
onclick="javascript:document.getElementById('img4').src = '/uploadfiles/businessinfoimages/<%#Eval("pic3_") %>';"
onerror="this.style.display='none';" alt='浏览大图' /></td>
</tr>
</table>
img1 2 3 那边onclick事件后面加个JS方法 view()
2.var x = document.getElementById("img4");
我不知道你这个获取的img控件,开始就要有值,你可以经过调试看是否有值
3.控制图片大小估计没有错
onerror="this.style.display='none';" onload="view()" alt='<%#Eval("name") %>' />
这句中为什么会有 onload="view()" , 在HTML中IMG是没有onload事件的, 你改一下吧