使用js下拉菜单预加载图像

这真的很难解释，但我有一个巨大的问题，预加载图像应该只显示在某些下拉选项。

我试着在谷歌和这里搜索，但我真的找不到任何解决方案，我也不明白这一点，作为朋友写给我的。

我将分享我正在使用的脚本(js)，并下拉。

图像通过下拉菜单从数据库中取出(对于每个下拉菜单)，并存储在本地。

问题是，当用户进入页面时，图像正在后台预加载，如果用户在那个时候单击下拉选项，图像将不会显示。然而，如果他等待一点(直到所有的图像加载(当他们正在加载，他们是不可见的网站))，然后选择下拉选项，图像将显示正常。

下面是我的脚本:

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('.outtaHere').change(function(){
    var selected = $(this).find(':selected');
    $('.countrylist').hide();
   $('.'+selected.val()).show();
    $('.optionvalue').html(selected.html());
});
});//]]>  
</script> 
<script>
function handleChange(input) 
 {
    if (input.value < 50) 
    {
       alert('Min value is: 50');
       input.value = 50;
     }
     if (input.value > 1000000) 
     {
       alert('Max value is: 100000');
         input.value = 1000000;
      }
 }
 </script>
<script type='text/javascript'>//<![CDATA[ 

var ids = new Array();
var use = new Array();
var ful = new Array();
ids[0] = "";
use[0] = "";
ful[0] = "";
<?php
foreach($rows as $row){
    echo "ids[{$row["id"]}] = '"{$row["name"]}'";'n";
    echo "use[{$row["id"]}] = '"{$row["url"]}'";'n";
}
?>
        function Choice() {
            //x = document.getElementById("users");
            y = document.getElementById("selectUsers");
              //x.value = y.options[y.selectedIndex].text;
              document.getElementById("ids").value = ids[y.selectedIndex];
              document.getElementById("use").value = use[y.selectedIndex];
         }

//]]>  
</script>

这里是显示图像的下拉菜单和div

  <select id="selectUsers" class=" outtaHere" name="users" onChange='Choice();'><option value="0" selected="selected">Choose...</option>
<?php
foreach($rows as $row){
echo "<option value='"{$row["id"]}'">{$row["name"]}</option>'n";
}
?>
</select>
</label>
<div style="margin-left: -20%;">
    <?php
foreach($rows as $row){
echo "  <ul class='"countrylist {$row["id"]}'">'n";
echo "  <img src='"{$row["thumb"]}'" class='"vizitke'"/>'n";
echo "  </ul>'n";
 }
  ?>
</div>

请理解我的问题，我真的尽了最大的努力去寻找一个选择。