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

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

1 голос
/ 24 марта 2012

У меня есть какой-то скрипт 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>

Есть ли простой способ без изменения всего сценария?

Ps извините за плохой английский:)

Ответы [ 3 ]

3 голосов
/ 24 марта 2012

Самый простой способ - просто добавить это в ваш 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 голосов
/ 24 марта 2012

Вариант 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 magic

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

<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

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

0 голосов
/ 24 марта 2012

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

<img style='display:none;' src='/wp-content/themes/Locator/images/search.png'>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...