控制图片大小图片不显示

闲游四疯 2008-04-12 10:14:40

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

           }

...全文

218 13 打赏收藏转发到动态举报

写回复

用AI写文章

13 条回复

切换为时间正序

请发表友善的回复…

发表回复

skyaspnet 2008-04-12

打赏
举报

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

叶子 2008-04-12

打赏
举报

不是说三个按钮吗？

闲游四疯 2008-04-12

打赏
举报

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

闲游四疯 2008-04-12

打赏
举报

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_mark") %>' 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_mark") %>';"

                             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_mark") %>';"

                             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_mark") %>';"

                             onerror="this.style.display='none';" alt='浏览大图' /></td>

                        </tr>

                    </table>

skyaspnet 2008-04-12

打赏
举报

你是用个人服务器测试吗? 系统是XP? 如果是的话就很有可能会出现图片显示不完全,

或者二次刷新才可显示图片, 你可以使用JS的图片预载的功能, 先强制装载所有图片,

然后再进行操作

skyaspnet 2008-04-12

打赏
举报

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

喜受写代码的小强 2008-04-12

打赏
举报

支持下!

skyaspnet 2008-04-12

打赏
举报

<img id="img4" src='/uploadfiles/businessinfoimages/<%#Eval("pic1_mark") %>' onclick=" Cerimg()"

                     onerror="this.style.display='none';" onload="view()"  alt='<%#Eval("name") %>' />

这句中为什么会有 onload="view()" , 在HTML中IMG是没有onload事件的, 你改一下吧

闲游四疯 2008-04-12

打赏
举报

据测试，个人觉得应该是图片尚未加载就执行JS，所以得不到图片宽度跟高度，显示时默认为0。
有什么办法能解决这个问题吗？

wh110 2008-04-12

打赏
举报

[Quote=引用 3 楼 skyaspnet 的回复:]
你是用个人服务器测试吗? 系统是XP? 如果是的话就很有可能会出现图片显示不完全,

或者二次刷新才可显示图片, 你可以使用JS的图片预载的功能, 先强制装载所有图片,

然后再进行操作
[/Quote]

先强制装载所有图片这样效率不高了

闲游四疯 2008-04-12