img src & jQuery? - PullRequest
Новая
       23

img src & jQuery?

3 голосов
/ 03 декабря 2009

У меня есть изображение, и с помощью jQuery я превратил его в кнопку. Так называемая кнопка имеет два состояния: обычное и нажатое.

Используя jQuery, я обнаруживаю "mousedown" и "mouseup" и заменяю атрибут "src", например так: 

$("#btn").click(function() {
   ;//DO SOMETHING HERE WHEN PRESSED
});
$("#btn").mousedown(function() {
   $(this).attr({ src: regular.png });
});
$("#btn").mouseup(function() {
   $(this).attr({ src : pushed.png });
});

Во время тестирования этого форума он отлично работает! Но сегодня я заметил, что когда изображения хранятся на сервере, он загружает изображения снова и снова с каждым изменением атрибута.

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

Кроме того, если есть возможность лучше выполнить то, что я пытаюсь сделать здесь, пожалуйста, дайте мне знать.

Спасибо.

Ответы [ 3 ]

5 голосов
/ 03 декабря 2009

Вместо изменения атрибута src вы можете использовать span или div, чтобы показать изображение (через фоновое изображение) и создать два класса CSS, по одному для каждого изображения. Затем вы можете просто переключать класс CSS элемента для переключения кнопок.

5 голосов
/ 03 декабря 2009

Создайте одно изображение, содержащее оба состояния кнопки. Затем динамически измените положение фонового изображения при наведении / наведении мыши: 

<style type="text/css">

 .button_normal {
   width: 50px;
   height: 50px;
   background-image: url(merged_button_bg.png);
   background-repeat: no-repeat;
   border: solid black 1px;
   cursor: pointer;
 }

 .button_over {
  background-position: -50px;
 }

</style>

<div class="button_normal"></div>

<script>

 $(document).ready(function() {
  $('.button_normal').mouseover(function() {
   $(this).addClass('button_over');
  });
  $('.button_normal').mouseout(function() {
   $(this).removeClass('button_over');
  });
 });

</script>

В этом примере предполагается, что целевое изображение имеет квадрат 50px, а merged_button_bg.png равно 100px на 50px.

2 голосов
/ 03 декабря 2009

Вы пробовали подключить плагин Preload ?

Обновление: извините, я не читал достаточно внимательно, я думал, что это было требование пролонгации. Более общий сценарий предварительной загрузки: здесь .

Кстати, я согласен, что CSS-спрайты являются лучшим решением , если они соответствуют ситуации, т. Е. Если у вас есть полный контроль над самими изображениями.

...