控制图片大小 图片不显示

Question

在显示的时候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;
           }

Answer 1

能把你的HTML代码全部发一下吗? 这样改起来会快一些

Answer 2

你是用个人服务器测试吗? 系统是XP? 如果是的话就很有可能会出现图片显示不完全, 或者二次刷新才可显示图片, 你可以使用JS的图片预载的功能, 先强制装载所有图片, 然后再进行操作

Answer 3

skyaspnet  谢谢你的回答 刚才吃饭去了。下面是我HTML代码，帮我看下。table放在repeater里面
我发布的服务器上面也会出现这个问题，并不是我个人测试会出现这个问题。。
你说的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>

Answer 4

哦 有点错。。上面HTML代码被我改来改去少了。
img1 2 3 那边onclick事件后面加个JS方法 view()

Answer 5

把onerror="this.style.display='none';" 去掉试一下

Answer 6

1.你可以第一才加载网页的时候就SRC付图片路径
2.var x = document.getElementById("img4");
我不知道你这个获取的img控件,开始就要有值,你可以经过调试看是否有值
3.控制图片大小估计没有错

Answer 7

onerror="this.style.display='none';"  去掉也不行的~哎。

Answer 8

嗯 我测试过了。一开始img都有值的。。就是不显示图片。。第一次访问这张图片都不显示。要刷新或再点次才显示~郁闷~

Answer 9

<img id="img4" src='/uploadfiles/businessinfoimages/<%#Eval("pic1_") %>' onclick=" Cerimg()"
                     onerror="this.style.display='none';" onload="view()"  alt='<%#Eval("name") %>' />
这句中为什么会有 onload="view()"  , 在HTML中IMG是没有onload事件的, 你改一下吧