这真的很难解释,但我有一个巨大的问题,预加载图像应该只显示在某些下拉选项。
我试着在谷歌和这里搜索,但我真的找不到任何解决方案,我也不明白这一点,作为朋友写给我的。
我将分享我正在使用的脚本(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>
请理解我的问题,我真的尽了最大的努力去寻找一个选择。
我很感激你的努力。我不是很了解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/