Правильно ли используются эти предварительно загруженные изображения?

Это довольно специфично, поэтому я не мог просто найти ответ в Интернете!

У меня есть код, который загружается в некоторые изображения, которые я хочу отображать при наведении курсора. Все работает нормально, но иногда возникает задержка при установке флажка в div, где используется функция наведения.

jQuery(document).ready(function(){

$icons = [];

$('#boat_icon').hide();

jQuery('.boat_row').each(function(e){
            $icons.push('url("' + $(this).attr("id") + '")');
            });

jQuery($icons).each(function(e){

jQuery('#boat_icon').css('background-image', this);

console.log(this + "loaded!");

});

$('#boat_icon').show();
});

 jQuery('.boat_row').hover(function(e){
     e.preventDefault();

     $(this).css('background-color', 'D8EAFF')

     var iconpath = $(this).attr("id");
     $('#boat_icon').css('background-image', 'url("'+iconpath+'")');
     },

     function(){
     $(this).css('background-color', '')
 });

Путь к значкам - это строка в базе данных, поэтому мне было интересно ... это правильный способ использовать предварительно загруженные изображения? Поскольку изображения загружаются при готовности, используются ли они затем из кеша или загружаются снова каждый раз при наведении курсора, потому что я не отображает сохраненный объект изображения?


image jquery preload
person RonnyKnoxville    schedule 25.10.2011    source источник
comment
В конце концов, это зависит от браузера, из которого загружаются изображения. Вы можете попробовать улучшить внешний вид с помощью CSS-спрайтов и настройки File-ETags.   -  person Dr.Molle    schedule 25.10.2011
comment
рассмотрите возможность использования спрайтов изображений, а затем просто измените положение фона с помощью CSS, js не требуется   -  person Moin Zaman    schedule 25.10.2011
comment
Доктор Молле, Мойн Заман, я видел использование CSS-спрайтов с использованием фонового позиционирования, но никогда не использовал их раньше. Немного спешил с выпуском этого приложения, поэтому на этот раз у меня не было времени на изучение, но спасибо за вклад. Я заглянул в них :) Очень полезно!   -  person RonnyKnoxville    schedule 25.10.2011

Ответы (1)


arrow_upward
0
arrow_downward

Вы должны использовать эту предварительную загрузку:

if (document.images)
{
  pic1= new Image(100,25); 
  pic1.src="http://someplace.com/image1.gif"; 
}

if (document.images) используется для проверки, не поддерживает ли браузер предварительную загрузку изображений.

person Sergey    schedule 25.10.2011
comment
Это то, что я видел вокруг, но, к сожалению, он не казался идеальным для использования в этом приложении. Спасибо за вклад! - person RonnyKnoxville; 25.10.2011