JQuery сбой Internet Explorer

Question

Хорошо, в основном, я проектирую и разрабатываю довольно сложный веб-сайт, который вращается вокруг использования jQuery. Мои знания jQuery очень плохие, и я впервые правильно его использую. Я уже писал здесь вопрос о сценарии и, по-видимому, он ужасен, но я не показал вам точно, для чего я его на самом деле писал, и теперь я могу это сделать. Потому что я загрузил его в тестовый каталог. Теперь он отлично работает в любом браузере, кроме IE. Стилизация CSS уже на подходе, и она скоро должна закончиться! Тем не менее, Internet Explorer показывает плохие проблемы. В IE 7,8 он выглядит нормально, но когда вы наводите курсор мыши на ссылку, он сразу вылетает. IE 6, дисплей, кажется, не работает должным образом вообще. Но IE 6 - это меньшая проблема.

Если бы вы могли потратить всего 5 или 10 минут, чтобы потенциально переписать простой сценарий, который потенциально занял бы у меня 10 часов, я был бы очень благодарен! Вот сайт - http://openyourheart.org.uk/test/index.html

При необходимости я могу отправить все файлы в архиве.

Спасибо заранее.

Bradley

Answer 1

Проведя более глубокое расследование сбоя, я обнаружил, что только две коробки действительно вызывали сбой. Поэкспериментировав со сценарием, я обнаружил, что исчезающие изображения вызывали его, и если я их убрал, он работал нормально .. Ооо, я искал различия между divами, в которых исчезали изображения, и обнаружил, что у разбивающихся коробок был и идентификатор, и класс. Это, похоже, повлияло на него ?! Я удалил идентификатор и просто оставил классы «пустого квадрата», и он работал без сбоев.

Оригинал -

<div id="row1square2" class="blank square">
  <div class="square whoweare">ESTABLISHED<br/>FOR OVER<br /><span id="thirtyyears">30 YEARS</span></div>

Новая версия -

<div class="blank square">
  <div class="row1square2 square whoweare">ESTABLISHED<br/>FOR OVER<br /><span id="thirtyyears">30 YEARS</span></div>   

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

Скрыть горизонтальную полосу прокрутки в IE 7 и ниже

Еще раз спасибо, Брэдли

Answer 2

Есть много вещей, которые вы должны делать на своей странице.

1) Для производства всегда используется минимизированная версия jQuery. А еще лучше: используйте jQuery из CDN, такого как Google, чтобы увеличить вероятность того, что jQuery уже кэшируется в браузере клиентов, а время загрузки его уменьшено.

Прямо сейчас ваш jquery составляет 160 КБ, вместо этого используйте это в своем заголовке:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

2) Раздвижная панель (http://www.openyourheart.org.uk/test/scripts/jquery.slidingpanels.js) дает 404 - проверьте, если у вас есть сценарий в правильном месте).

3) Сейчас существует 8 HTTP-запросов только для скриптов JavaScripts. Чем больше javascripts вы можете поместить в один файл и минифий ( YUI Compressor ), тем лучше. Каждый Javascript будет загружен и остановит загрузку всего остального на вашей странице, пока он не загрузится, и потому что они находятся сверху. Загрузка всей страницы займет очень много времени.

Используйте инструмент вроде Firebug (вкладка Net) в Firefox, чтобы увидеть, сколько файлов загружается и насколько они велики.

4) Я думаю, что есть место для изображений, которые становятся меньше (Одно изображение в фейсбуке желтого цвета - 500 КБ - ваш фон - 1,3 МБ - Love Hurts - 590 КБ) У вас есть 2 МБ между 3 изображениями - представьте кого-нибудь с коммутируемым соединением, пытаясь добраться до вашего сайта.
Ваш фон в любом случае не имеет много деталей - в фотошопе, если качество падает до 6-8, я не думаю, что это будет иметь большое значение.

5) Другие меньшие изображения могут быть преобразованы в PNG и уменьшены в размерах. Для файлов PNG вы можете использовать такие утилиты, как OptiPNG и другие, чтобы уменьшить размер изображений PNG - я думаю, что конкретное изображение (facebook) должно быть ниже диапазона 25 КБ после того, как он будет сделан и уменьшен.

6) Рассмотрите возможность сжатия GZip для ваших веб-страниц.

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

Более высокие времена загрузки вредны для SEO, так как Google рассматривает время загрузки как параметр SEO. В Firefox Firebug вы можете установить дополнение под названием YSlow! это поможет вам отслеживать другие вещи, которые вы можете сделать.