веб-сайт с jQuery очень медленным Firefox 4 и почти статическим Safari все остальные в порядке - PullRequest
2 голосов
/ 11 июня 2011

при загрузке веб-сайта в IE, Chrome и Orpera события jQuery при наведении курсора работают плавно и без проблем

когда я загружаю сайт в Firefox 4, я не знаю более старых версий, возможно, и Safari, сайт работает медленно

в Firefox, задержка около 1 секунды после того, как мышь наведет курсор на элемент

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

Не могли бы вы сказать мне, что я могу изменить, чтобы это исправить?

образец сайта: http://filetaxes4free.com/temporary/

кроме вызова jQuery из googel apis, это Jquery, который я написал:

//set wrapper hegiht based on browser window
window.onload = setHeight;function setHeight(){ var minWidth = 0;var minHeight = 0;
    if (typeof screen.availHeight != 'undefined'){minWidth = screen.availWidth+"px"; minHeight = screen.availHeight+"px";}
    document.getElementById("leftBodyWrapper").style.minHeight = minHeight; return true;}

jQuery(document).ready( function() {
//tabs
    jQuery( "#tabs" ).tabs().tabs({  fx: { opacity: 'toggle', duration: 1000 }}).tabs('rotate', 3500, false);
//change image on hover
    jQuery("img.tabImg", jQuery('#tabs')).hover(
        function(event) {jQuery(this).attr("src", jQuery(this).attr("src").replace(".png","-active.png"));},
        function(event) { jQuery(this).attr("src", jQuery(this).attr("src").replace("-active.png",".png"));
    });
//slide menu items on hover and change color of item    
    jQuery('a', jQuery('.slideMenu')).hover(
        function(event) {jQuery(this).animate({ paddingLeft: "15px" }, 300 )
        if(jQuery(this).parent().hasClass('current'))
            jQuery(this).css("color", "#307F73"); 
        else jQuery(this).css("color", "#307F73");},
        function(event) {jQuery(this).animate({ paddingLeft: "0" }, 300 );
        if(jQuery(this).parent().hasClass('current'))
            jQuery(this).css("color", "#307F73"); 
        else jQuery(this).css("color", "#4DCCB8");});
//load PIEcss is IE
    if(navigator.appName=='Microsoft Internet Explorer'){
        if (window.PIE) {jQuery('.roundRightEI').each(function() {PIE.attach(this);});}}
});

Спасибо,

ОБНОВЛЕНИЕ !!!

После деконструкции и создания этого сайта я понял, что CSS для Safari и Firefox - причина замедления. Ничего общего с jQuery или шрифтами. Если я не загружаю CSS, все работает как надо.

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

UPDATE

Хорошо, это то, что вызывает замедление как в сафари, так и в firefox:

div # container {

-moz-box-shadow: inset 0 0 200px 0 #6bcccb;
-webkit-box-shadow: inset 0 0 200px 0 #6bcccb;
box-shadow: inset 0 0 200px 0 #6bcccb;

}

но если я сделаю

div # container {

-moz-box-shadow: 0 0 200px 0 #6bcccb;
-webkit-box-shadow: 0 0 200px 0 #6bcccb;
box-shadow: 0 0 200px 0 #6bcccb;

}

все гладко (конечно, я хочу вставку тени)

UPDATE

И проблема была в длинной тени.

200px

если я использую тень на 5 пикселей, все будет хорошо ...

Я сбит с толку ...

Ответы [ 5 ]

0 голосов
/ 11 июня 2011

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

Я бы порекомендовал вам использовать спрайты изображений или предварительно загрузить изображения при наведении курсора на JavaScript.

0 голосов
/ 11 июня 2011

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

Вы не можете просто перерисовать все каждый раз, когда мышь перемещается на 1 пиксель!Выберите более подходящее событие.

0 голосов
/ 11 июня 2011

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

  • изменить цвет на более темный оттенок
  • добавить тень на изображение значка
  • добавить тень к тексту

Это потребует меньше работы на стороне клиента при использовании ненужного количества JS.

EDIT: Пример или что-то, с чего можно начать, если вы решили использовать больше CSS для достижения эффекта наведения: http://jsfiddle.net/EMvah/

0 голосов
/ 11 июня 2011

Я на Gentoo с FF 4.0.1. Анимация медленнее, чем в Chrome и Opera. Я попытался изменить: положение div.menu от относительного до абсолютного. Это сделало анимацию намного быстрее. Я не уверен, что происходит с людьми из Windows.

0 голосов
/ 11 июня 2011

Я наконец-то открыл окно Safari Developer и около 50% этого долгого времени загрузки тратится на загрузку ваших пользовательских шрифтов.Я бы избавился от них и посмотрел, улучшится ли это.

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

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

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


РЕДАКТИРОВАТЬ:

Чтобы найти оскорбительную часть, я бы почти раздолбал страницу и медленно добавлял обратно целые куски рабочего кода, пока он снова не захлебнется.( РЕДАКТИРОВАТЬ: Как указано в другом ответе, начните с удаления события mousemove.)


РЕДАКТИРОВАТЬ 2:

Пожалуйста, ПРОВЕРЬТЕ ВАШ КОД , прежде чем делать что-либо еще!Я обнаружил некоторые ошибки, связанные с открытыми тегами HTML.


РЕДАКТИРОВАТЬ 3:

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

...