Предварительная загрузка изображений для состояний элементов

У меня есть скрипт 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. Извините за плохой английский :)


javascript image jquery styles preload
person Mindaugas Jakubauskas    schedule 23.03.2012    source источник
comment
возможный дубликат предварительной загрузки массива изображений с помощью jquery   -  person Joseph    schedule 24.03.2012

Ответы (3)


arrow_upward
3
arrow_downward

Самый простой способ — просто добавить это в свой 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>, чтобы он выполнялся как можно быстрее.

person jfriend00    schedule 23.03.2012

arrow_upward
2
arrow_downward

Вариант 1. Использование объектов изображения в JavaScript

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

Если вы потрудитесь их подготовить, вам не придется заморачиваться предварительной загрузкой различных изображений состояния для ваших элементов, так как они будут загружаться вместе с изначально видимыми. Вот пара статей:

person Dmitry Pashkevich    schedule 23.03.2012
comment
Изображения с display: none по-прежнему загружаются браузером. - person jfriend00; 24.03.2012
comment
Соглашение здесь заключается в том, чтобы отредактировать ваш ответ, чтобы исправить его, чтобы он не вводил других в заблуждение и не привлекал отрицательных голосов. - person jfriend00; 24.03.2012
comment
Исправил мой ответ. Все же лучше использовать visibility: hidden для контейнера предварительной загрузки, поскольку он позволяет загружать фоновые изображения и, следовательно, более универсален для семантики контейнера предварительной загрузки. - person Dmitry Pashkevich; 24.03.2012

arrow_upward
0
arrow_downward

вы должны предварительно загрузить изображения самостоятельно. нравится

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