Question

我有一些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>

并输出：

<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>

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

P.S。抱歉英语不好：）

Answer 1

最简单的方法是将其添加到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);

您将此代码放在<head>部分中，以便尽快执行。

Answer 2

选项1.在JavaScript中使用Image对象

var preloadImages = [
    'path/to/image1.jpg',
    'path/to/image2.jpg',
    'path/to/image3.jpg',
    ...
];
for (var i=0, len = preloadImages.length; i < len; i++) {
    (new Image()).src = preloadImages[i];
}

请注意，您无需将这些图像插入DOM。

选项2.额外的HTML + CSS魔术

首先，您要创建一个单独的容器，放置要预加载的图像：

<div class="preload">
   <img src="path/to/image1.jpg" alt="" />
   <img src="path/to/image2.jpg" alt="" />
   <img src="path/to/image3.jpg" alt="" />
</div>

这是CSS：

.preload {visibility: hidden; overflow: hidden; width: 0; height: 0;}

您需要visibility: hidden使元素及其内容不可见，但仍然参与页面布局。预加载容器内的图像将由浏览器提取。其他属性在那里，以便您的preload元素不会占用页面上的空间。此外，您还希望将其放在文档正文的末尾。使用visibility: hidden;比display: none;更安全，因为它也会加载背景图片。

选项3.使用CSS sprites

如果你不厌其烦地准备它们，你将不必为你的元素预加载不同的状态图像，因为它们将与最初的visibile一起加载。这里有几篇文章：

Answer 3

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

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

预加载元素状态的图像

3 个答案:

选项1.在JavaScript中使用Image对象

选项2.额外的HTML + CSS魔术

选项3.使用CSS sprites