Question

这真的很难解释，但我在预加载图像方面存在很大问题，只能在某些下拉选项中显示。

我试图在谷歌和这里搜索，但我真的找不到任何解决方案，也不理解这一点，正如朋友为我写的那样。

我将分享脚本（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>

请理解我的问题，我真的尽力寻找一个选项。

我感谢您的任何尝试。

Answer 1

我并没有真正使用jQuery，但如果我的代码正确，则命令$(window).load()应该初始化预加载过程。然而，只有在页面已经完全加载（包括所有图像）时才会调用它。请参阅https://api.jquery.com/load-event/以供参考。

我找到了一个为您预加载图像的简单示例： http://dreamerslab.com/blog/en/preload-images-with-jquery-preload-plugin/

也许这些开箱即用的jQuery图像预加载示例对您也有帮助： jquery4u.com/plugins/preload-image-plugins /

使用js下拉列表预加载图像

1 个答案: