Не удается загрузить последнее изображение в документе - «Не удалось загрузить ресурс»

Question

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

Я получаю сообщение "Ожидание mysite.com ..." и индикатор загрузки продолжает вращаться. Это продолжается примерно 10 секунд, а затем Chrome сдается и сообщает мне "Невозможно загрузить ресурс 'foobah.png'" из консоли разработчика. Изображение определенно по указанному пути. Иногда он загружается, иногда нет. Если я вообще уберу ссылку на это изображение, ошибка будет попадать на другое изображение на странице. Это обычная, но периодическая ошибка.

Мой сайт тяжелый JavaScript (более 2500 строк). Я подозреваю, что это может быть связано либо с:

1. Загрузка Javascript мешает изображение загружается.
2. Что-то смешное происходит в отношении кеширование изображений.

Есть ли у кого-нибудь проблемы с загрузкой страниц такого типа?

Ценю любую помощь, которую вы можете оказать!

Пример URL: http://dev.thebeer.co/imgs/UI/inboxIcon.png

Экраны инструментов разработчика Chrome:

UPDATE:

Это пример скриншота из firebug. Вы можете видеть, что запрос ресурса не истекает, а для его извлечения требуется много времени. Ошибка файла может варьироваться от фонового изображения CSS до обычного изображения и даже файла шрифта. Я думаю, что эта проблема глубже, чем на стороне клиента. Мы также сталкиваемся с Chrome: «Следующие страницы перестали отвечать. Вы можете время от времени ждать, пока они не откликнутся или убить их». Мы разделили страницу ВСЕГО javascript, это почти голая оболочка! Проблемы с загрузкой изображений продолжают возникать в разных браузерах.

UPDATE:

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

[ Wed Feb 23 06:54:17 2011] [debug] proxy_util.c(1854): proxy: grabbed scoreboard slot 0 in child 5871 for worker proxy:reverse
[Wed Feb 23 06:54:17 2011] [debug] proxy_util.c(1967): proxy: initialized single connection worker 0 in child 5871 for (*)
[Wed Feb 23 06:54:24 2011] [debug] proxy_util.c(1854): proxy: grabbed scoreboard slot 0 in child 5872 for worker proxy:reverse
[Wed Feb 23 06:54:24 2011] [debug] proxy_util.c(1873): proxy: worker proxy:reverse already initialized
[Wed Feb 23 06:54:24 2011] [debug] proxy_util.c(1967): proxy: initialized single connection worker 0 in child 5872 for (*)
[Wed Feb 23 06:59:15 2011] [debug] proxy_util.c(1854): proxy: grabbed scoreboard slot 0 in child 5954 for worker proxy:reverse
[Wed Feb 23 06:59:15 2011] [debug] proxy_util.c(1873): proxy: worker proxy:reverse already initialized

Answer 1

Похоже, это довольно тяжелый сайт (2500+ строк JS!).Странно, что вы испытываете его только в Chrome, но это может быть связано только с тем, как он обрабатывает запросы.

Поскольку ваш статический контент очень тяжелый, я бы рекомендовал использовать сеть доставки контента (CDN).Распределение вашего контента по CDN (и географическим местоположениям) позволяет обслуживать пользователя ближайшим и, следовательно, самым быстрым сервером.

Существует много провайдеров CDN, которые взимают плату за размещение вашего контента.Я использую Amazon S3 хранилище, и хотя это не настоящий CDN, он помогает мне распространять статический контент, что ускоряет мои сайты.

Также с помощью Amazon S3 вы можете указать свое географическое местоположение в области хранения, будь то США или Европа и т. Д. Это географическое местоположение может быть ближе к существующему веб-серверу, что является бонусом.S3 также дает вам бесплатное членство, чтобы проверить его.

Надеюсь, это поможет.

Крис.

Answer 2

Наконец-то у меня есть кто-то с этой проблемой:

Chrome Classic - «Не удалось загрузить ресурсы»

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

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

Важное замечание 2: иногда на вкладке «Сеть» веб-инспектора истекает время соединения - поэтому вы видите состояние «ОЖИДАНИЕ»

Решения / обходные пути, которые я пробовал:

1. обновить Chrome до последней версии (обычно не повезло)
2. использовать предварительную загрузку изображения (иногда это работает)
3. использовать data-uri и поместить его в другой файл .css: http://css -tricks.com / data-uris /

При некотором форматировании (селектор CSS, порядок правил CSS и разрыв строки), с некоторыми пробами и ошибками, изображение загружается снова.(этот работает волшебно)

Интересно, не заклинило ли конкретное изображение в исходном изображении средство визуализации изображений (так как data-uri не работает в начале) ... но эта проблема появится, когда какой-то стиль CSSприменяется для PNG-фонового блока - особенно когда задействована «непрозрачность» (или если PNG является скрытым фоном)

Резюме:

1. сжатие изображения любым способом
2. изменить селектор CSS (например, применить фон в другом элементе), если он все еще не загружен, тогда это проблема изображения - попробуйте изменить какой-то бит исходного изображения * или с помощью data-uri (решение 3)
3. измените порядок загрузки изображения, если (2) загрузили ваше изображение - тогда это будет проблема css selector / ordering

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

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

Answer 3

Если бы это было специфично для Chrome, я бы сказал, что это может иметь какое-то отношение к этой известной ошибке , но, поскольку вы упомянули, что это происходит в других браузерах, вы получаете те же ошибки от Firebug,Инструмент веб-разработчика Safari и / или инструмент разработчика IE?

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

Один из способов помочь решить проблему в целом - это создать спрайты или использовать альтернативы, не связанные с изображениями, где это возможно (вы можете использовать несколько методов CSS3 для замены таких вещей, как градиенты).и еще много чего), а также использование таких инструментов, как SmushIt для изображений, а также JS-минификатор и объединитель для уменьшения размеров файлов и запросов к серверу.

Answer 4

Вы должны рассмотреть возможность сжатия ваших файлов скриптов (minify, gzip и т. Д.).С другим хостом для ваших изображений (images.yoursite.com) у вас будет больше параллельных соединений.

Вы можете использовать асинхронную загрузку JavaScript, как Google предлагает в документах Google Analytics: $ (документ).готов (функция () {

 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

 ga.src = "xpto.js"

 (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);

});

Answer 5

Так что, как бы случайно это ни звучало ... добавьте строку запроса случайного числа к src при загрузке.У меня была эта проблема, когда я работал над настраиваемой библиотекой popover для старого работодателя, и сайты, на которые он загружался, были ... скажем, очень ресурсоемкими.Это, по какой-то причине, исправило это для меня.YMMV?

img.src = 'x.gif?r=3192319231938123912';

Answer 6

Несколько вещей, чтобы попробовать. Чтобы исправить проблему .woff, добавьте соответствующий mimetype в настройки вашего сервера:

AddType application/vnd.ms-fontobject .eot AddType application/octet-stream .otf .ttf

Затем воссоздайте изображение .png, которое не загружается. Может быть, кто-то сохранил изображение в формате .jpg или gif, но затем переименовал файл с расширением .png, что запутало браузер Попробуйте создать это изображение еще раз и убедитесь, что оно сохранено в правильном формате.