Ролловер очень медленный

Question

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

Как вы можете видеть здесь, http://www.thisisfed.com/ ролловеры действительно медленные, есть ли способ решить эту проблему ?

Я использовал простой Javascript переключения

  [...] onmouseover="toggle_visibility('id');" onmouseout="hide('id');"

И вот как работает JavaScript

 function toggle_visibility(id) {

   var e = document.getElementById(id);

   if(e.style.visibility == 'hidden')
      e.style.visibility = 'visible';
   else
      e.style.visibility = 'hidden';

   }

Спасибо за любую помощь.

Кормили.

Answer 1

Это не медленно. Изображения показываются во второй раз, когда вы переносите заголовки, потому что, когда вы выполняете ролловер в первый раз, нет встроенного стиля, и он переключается на ваш вариант "else" вашего оператора "if" (где вы скрываете изображение).

Как уже указывал кто-то, в вашем коде есть много вещей, которые можно улучшить, но в то же время вы можете добавить встроенный стиль по умолчанию для ваших изображений, чтобы они были скрыты, а затем обновить свою функцию toggle_visibility и скрыть функции так:

 function toggle_visibility(id) {    
     var e = document.getElementById(id);
     if (e.style.visibility == 'hidden') e.style.visibility = 'visible';
     else e.style.visibility = 'hidden';

 }

 function hide(id) {
     var e = document.getElementById(id);
     if (e.style.visibility == 'visible') e.style.visibility = 'hidden';
     else e.style.visibility = 'visible';
 }

Демонстрация скрипки здесь.