为列表框中的每个项目加载不同的图像

Question

使用Javascript：

     function changeMap()
    {
       imagesource =  "http://maps.google.com/maps/api/staticmap?size=500x500&maptype=hybrid&zoom=16&sensor=false&markers=color:blue|label:K|28.541250,77.204100" ;
       mapimage.src  = imagesource ;
    }

Html代码：

         <select name="choose_colony" id="choose_colony" size="8" onchange="changeMap()" style="float: left;">
        <option value="1" >Big apartments</option> 
        .
        .
        <option value="999">plaza</option>
        </select>
        <img name="mapimage" src="" alt="Select your Colony" style="float: right;">

此时，只要在列表框上进行选择，就会调用changeMap并加载图像。我想要的是每次加载不同的图像，具体取决于所选的选项。

列表框中将有超过2000个条目。考虑到这一点，最好的方法是什么？我可以找出if / then部分，但我的主要问题是它是否可以将所有2000个长图像地址放在html文件中？ 我希望我很清楚..

Answer 1

有两种方法，哪种方法最好取决于您的设置：

1. 在客户端提供地址 （无论是在HTML中，还是更好：在 使用JSON单独的.js文件 格式）。
2. 在服务器端有地址， 并使用AJAX在何时询问地址 选择框更改。

第一个是

一旦页面和.js文件加载，
• 对您的用户来说最快
• 需要从服务器进行一次大转移
• 最好用于bandwith比roundtriptime便宜的情况，或者当用户可能滚动浏览选择框时，每次访问需要多个图像（.js文件将在进一步访问时缓存）

第二种情况是

• 对于用户来说有点慢，每次他更改选择框时，他都必须等待去服务器
• 需要更多但更短的服务器传输
• 最好用于用户仅访问该页面几次，并且仅进行一些选择的场景。