Javascript 为元素状态预加载图像

我有一些jquery脚本可以在鼠标上方更改元素图像，问题是它没有预加载图像。。我知道代码有点蹩脚（好吧，好吧，真的很蹩脚），但我必须使用它，所以

 <script type="text/javascript">
$(document).ready(function() {
    $('#searchbox_submit')
        .mouseover(function() {
            var src = $('.searchbox_submit').css("background-image",'url("/wp-content/themes/Locator/images/search_over.png")');
            $('.searchbox_submit').attr("src", src);
        })
        .mouseout(function() {
            var src = $('.searchbox_submit').css("background-image",'url("/wp-content/themes/Locator/images/search.png")');
            $('.searchbox_submit').attr("src", src);
        });
    $('#bribe_submit')
        .mouseover(function() {
            var src = $('.bribe_submit_img').attr("src").replace(".png","_over.png");
            $('.bribe_submit_img').attr("src", src);
        })
        .mouseout(function() {
            var src = $('.bribe_submit_img').attr("src").replace("_over.png",".png");
            $('.bribe_submit_img').attr("src", src);
        });
     ///////////////////////////////////////////////////////////////////////searchbox
    $('#searchbox_submit').click(function() {
        //,{onAfter:function(){ alert('tests'); } }
        //load_list($(this).parents('form').serializeArray());
        codeAddress();
    });
    $("#search_butt").keypress(function(event) {
      //load_list($(this).parents('form').serializeArray());
        if ( event.which == 13 ) {
            //load_list($(this).parents('form').serializeArray());
            codeAddress();
            event.preventDefault();                
        }
    });
});
</script>

$（文档）.ready（函数（）{
$（“#搜索框_提交”）
.mouseover（函数（）{
var src=$（'.searchbox_submit'）.css（“背景图像”，“url”（/wp content/themes/Locator/images/search_over.png”）；
$（'.searchbox_submit'）.attr（“src”，src）；
})
.mouseout（函数（）{
var src=$（'.searchbox_submit'）.css（“背景图像”，“url”（/wp-content/themes/Locator/images/search.png”）；
$（'.searchbox_submit'）.attr（“src”，src）；
});
$（“贿赂”提交）
.mouseover（函数（）{
var src=$（'.bribbe\u submit\u img'）.attr（“src”）.replace（“.png”，“\u over.png”）；
$（'.bribe_submit_img'）.attr（“src”，src）；
})
.mouseout（函数（）{
var src=$（'.bribbe\u submit\u img'）.attr（“src”）.replace（“.png之上的“.png”）；
$（'.bribe_submit_img'）.attr（“src”，src）；
});
///////////////////////////////////////////////////////////////////////搜索框
$（“#搜索框_提交”）。单击（函数（）{
//，{onAfter:function（）{alert（'tests'）；}
//加载_列表（$（this）.parents（'form'）.serializeArray（））；
代码地址（）；
});
$（“搜索”按钮）。按键（功能（事件）{
//加载_列表（$（this）.parents（'form'）.serializeArray（））；
if（event.which==13）{
//加载_列表（$（this）.parents（'form'）.serializeArray（））；
代码地址（）；
event.preventDefault（）；
}
});
});

和输出：

<form>
                <!--<input type="text" class="searchbox" name="s" value="" />-->
                <input id="search_butt" class="i" type="text" value="Set your location: country, city" style="font-style:italic;" onblur="if(this.value=='') this.value='Set your location: country, city';" onfocus="if(this.value=='Set your location: country, city') this.value='';" name="s">
                <span id="searchbox_submit" class="searchbox_submit"/>
            </form>

有没有不改变整个脚本的简单方法

---

另外，抱歉英语不好：）

你必须自己预装图片。 像这样

<img style='display:none;' src='/wp-content/themes/Locator/images/search.png'>

---

您必须自己预加载图像。 像这样

<img style='display:none;' src='/wp-content/themes/Locator/images/search.png'>

---

最简单的方法就是将其添加到HTML中：

<img style="display: none;" src="/wp-content/themes/Locator/images/search_over.png">
<img style="display: none;" src="/wp-content/themes/Locator/images/search.png">

然后，浏览器将缓存这两个图像

您还可以通过javascript进行如下预加载：

function preloadImages(list) {
    var img;
    if (!preloadImages.cache) {
        preloadImages.cache = [];
    }
    for (var i = 0; i < list.length; i++) {
        img = new Image();
        img.src = list[i];
        preloadImages.cache.push(img);
    }
}

var myImages = [
    "/wp-content/themes/Locator/images/search_over.png",
    "/wp-content/themes/Locator/images/search.png"
];

preloadImages(myImages);

函数预加载图像（列表）{
var-img；
如果（！preload-images.cache）{
preload images.cache=[]；
}
对于（变量i=0；i

---

您将此代码放在

部分，以便它尽快执行。

最简单的方法是将其添加到HTML中：

<img style="display: none;" src="/wp-content/themes/Locator/images/search_over.png">
<img style="display: none;" src="/wp-content/themes/Locator/images/search.png">

然后，浏览器将缓存这两个图像

您还可以通过javascript进行如下预加载：

function preloadImages(list) {
    var img;
    if (!preloadImages.cache) {
        preloadImages.cache = [];
    }
    for (var i = 0; i < list.length; i++) {
        img = new Image();
        img.src = list[i];
        preloadImages.cache.push(img);
    }
}

var myImages = [
    "/wp-content/themes/Locator/images/search_over.png",
    "/wp-content/themes/Locator/images/search.png"
];

preloadImages(myImages);

函数预加载图像（列表）{
var-img；
如果（！preload-images.cache）{
preload images.cache=[]；
}
对于（变量i=0；i

您将此代码放入

部分，以便它尽快执行。

选项1。在JavaScript中使用图像对象 您需要

可见性：hidden

，它使元素及其内容不可见，但仍参与页面布局。预加载容器中的图像将由浏览器获取。还有其他属性，这样您的preload元素就不会占用页面上的空间。此外，您还需要将其放在文档正文的末尾。使用

可见性：隐藏比
显示：无更安全因为它也将加载背景图像

备选案文3。使用CSS精灵
如果您不厌其烦地准备它们，就不必为元素预加载不同的状态图像，因为它们将与最初可见的图像一起加载。
以下是几篇文章：




选项1。在JavaScript中使用图像对象
您需要
可见性：hidden
，它使元素及其内容不可见，但仍参与页面布局。预加载容器中的图像将由浏览器获取。还有其他属性，这样您的preload元素就不会占用页面上的空间。此外，您还需要将其放在文档正文的末尾。使用
可见性：隐藏比
显示：无更安全因为它也将加载背景图像

备选案文3。使用CSS精灵
如果您不厌其烦地准备它们，就不必为元素预加载不同的状态图像，因为它们将与最初可见的图像一起加载。
以下是几篇文章：




可能重复显示的图像可能重复：浏览器仍无法获取任何图像。
这里的惯例是编辑您的答案以更正它，这样它不会误导他人或吸引反对票。更正了我的答案。对于预加载容器，最好使用
visibility:hidden
，因为它允许下载背景图像，因此对于“预加载容器”更通用语义。
显示的图像：无
仍然由浏览器获取。这里的惯例是编辑您的答案以更正它，这样它不会误导他人或吸引反对票。更正了我的答案。对于预加载容器，最好使用
visibility:hidden
，因为它允许下载背景图像，因此“预加载容器”语义更通用。