Изображения предварительной загрузки Javascript для изменения фонового изображения CSS - PullRequest
Новая
       27

Изображения предварительной загрузки Javascript для изменения фонового изображения CSS

2 голосов
/ 06 октября 2011

Я занимаюсь разработкой веб-сайта, для которого требуется изменить фоновое изображение элемента div при наведении на него ссылки.

Способ работы: 

<a href="index.php" title="Home ">
 <li id="current">
   Home<br \>
   <span class="nav_desc">Text text</span>
 </li>
</a>
<a href="about.php" title="About" id="about-link" 
   onmouseover="hover('about');" 
   onmouseout="hoverClear();">
 <li id="about">
  About<br \>
  <span class="nav_desc">About me</span>
 </li>
</a>
<a href="more.php" title="More" 
   onmouseover="hover('portfolio');" 
   onmouseout="hoverClear();">
 <li id="more">
  More<br \>
  <span class="nav_desc">More More More
  </span>
 </li>
</a>

js: 

function hoverClear(){
    $('.navReflect').css("background-image", "url(images/"+page+"/reflect.png)");
}
function hover(hover){
    $('.navReflect').css("background-image", "url(images/"+page+"/reflect-"+hover+".png)");
}

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

Но как только они загрузились, все работает нормально.Я ожидаю, что это проблема с ним нужно было загрузить.Так есть ли способ, которым я могу предварительно загрузить изображения перед рукой и по-прежнему использовать тот же метод для наведения.

Ответы [ 4 ]

6 голосов
/ 06 октября 2011

Сложите ваши изображения как одно изображение, а затем добавьте класс, который сдвигает свойство фона изображения на соответствующее смещение.

Это не только превращает несколько изображений в один HTTP-запрос, но и означает, что вам не нужно беспокоиться о написании кода для предварительной загрузки состояния hover изображений.

Это называется лист спрайта .

3 голосов
/ 06 октября 2011

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

function hoverClear(){
  $('.navReflect').css("background-position", "0 0");
}

function hover(hover){
  $('.navReflect').css("background-position", "0 -20px");
}

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

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

1 голос
/ 06 октября 2011

довольно просто предварительно загрузить изображения, что-то вроде: 

var img = new Image();
img.src = "/path/to/image.jpg";

Это может быть событие window.load или dom: ready где-то

0 голосов
/ 06 октября 2011

вы можете использовать это решение.http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/

...