为元素状态预加载图像答案

【问题标题】：Preloading images for element states为元素状态预加载图像
【发布时间】：2012-04-08 11:22:49
【问题描述】：

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

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

附：抱歉英语不好:)

【问题讨论】：

preload an array of images with jquery的可能重复

标签： javascript jquery image styles preload

【解决方案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> 部分，以便它尽快执行。

【讨论】：

【解决方案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，它使元素及其内容不可见，但仍参与页面布局。预加载容器中的图像将由浏览器获取。其他属性在那里，以便您的预加载元素不会占用页面上的空间。此外，您还需要将其放在文档正文的末尾。使用visibility: hidden; 比display: none; 更安全，因为它也会加载背景图片。

选项 3. 使用 CSS 精灵

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

【讨论】：

带有display: none 的图像仍由浏览器获取。
这里的约定是编辑你的答案以更正它，这样它就不会误导他人或吸引反对票。
更正了我的回答。最好将visibility: hidden 用于预加载容器，因为它允许下载背景图像，因此对于“预加载容器”语义更加通用。

【解决方案3】：

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

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

【讨论】：