Проблемы при работе с объектом Image в JavaScript

groundhog · 05.12.2006

Преамбула... Есть функция, написанная на JavaScript.

Код:

  function change_image (model, name) {
      var base_url = "http://localhost/imgs/apparat/";
      var img_obj = new Image();

      img_obj.src = base_url + model + '_' + name + '.jpg';
      document.getElementById(model + '_img').src = img_obj.src;
   }

Что она делает... Она просто делает замену картинки... То есть, имеется ряд изображений с именами типа: velesb_cyan.jpg, velese_blue.jpg и т.д. Между этими изображениями функция и переключается. Вызывается она по событию onclick:

Код:

onclick="change_image('velese', 'blue');

Теперь в реализацию углубимся... Внутри функции создаётся объект Image. Свойство src этого объекта переключается на файл изображения, путь к изображению формируется конкатенацией переменных (из функции видно, что к чему). Переключение свойства заставляет загрузить изображение в кеш (без отображения на экране). Потом по айдишнику другой картинки идёт переключение свойства src на картинку из кеша. Таким образом картинка подгружается в фоне, а потом отображается.

Теперь внимание вопрос: на всех браузерах семейства Windows всё работает отлично (в Firefox тоже), но вот в Linux (ALT Linux) любой браузер некорректно это всё переваривает - картинки на экране нету. А Opera под Linux вообще выпадает в соплях - закрывает все открытые окна и падает. Кто подскажет в чём проблема?

Решение простое - писать напрямую, то есть:

Код:

document.getElementById(model + '_img').src = base_url + model + '_' + name + '.jpg';

Просто интересно, где этот глюк закрался?

Одинокий Волк · 06.12.2006

Я чё-то не понял а зачем создавать новый объект если можно сразу по id присвоить? И зачем url сначало скидывать в переменную если ты используешь её всего 1 раз?

Код:

 function change_image (model, name) {
     document.getElementById(model + '_img').src = "http://localhost/imgs/apparat/" + model + '_' + name + '.jpg';
  }

ещё попробуй написать так:

Код:

onclick="javascript:change_image('velese', 'blue');

не знаю я вот везде где попробовал всё было ок, вот код:

Код:

<body>
<script language="JavaScript" type="text/javascript">
 function change_image (model, name) {
     document.getElementById(model + '_img').src = "http://localhost/imgs/apparat/" + model + '_' + name + '.jpg';
  }
</script>

<img id="velese_img" src="http://localhost/imgs/apparat/img.jpg" onclick="javascript:change_image('velese', 'blue');" /></a>
</body>

на линуксе не пробовал только...если есть возможность попробуй..

groundhog · 07.12.2006

Я же говорю, если напрямую писать в src, то на медленных соединениях происходит такой эффект - картинка исчезает, потом по мере подгрузки новой она сново появляется. Если делать через объект Image, то такого эффекта удаётся избежать, т.к. картинка подставляется из кеша уже готовая. А урл я скинул в переменную, так сказать, чтобы наглядно определить в чём ошибка.

Всё равно спасибо, Волк.

Проблемы при работе с объектом Image в JavaScript

groundhog

(L3) cache

Одинокий Волк

CPU register

groundhog

(L3) cache