Я хочу реализовать запрос на запуск и забытие в img src в JavaScript

Question

Я пытаюсь реализовать функцию «забей и забудь» при вызове img src = ... с веб-страницы и ищу наиболее надежный метод. Почему?

В большинстве систем веб-отслеживания, таких как Omniture или Coremetrics, существует запрос на img src, который также содержит все данные для записи в системе отслеживания. Как и любой другой запрос изображения, страница пытается дождаться ответа, что может замедлить загрузку страницы.

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

1. Сервер получил запрос и может легко ответить (HTTP-код ответа 200)
2. Сервер получил запрос, но застрял и все еще может с готовностью ответить ошибкой 500 с кодом ответа
3. Сервер вообще не работает
4. Сервер не найден из-за глюков DNS
5. Запрос попал на сервер, но он настолько застрял, что на его получение требуется заметное время.

Я уже исследовал использование объекта XMLHttpResponse и асинхронного запроса, который может тихо завершиться с ошибкой, но вы быстро столкнетесь с той же политикой происхождения и буллом кода совместимости браузера. Я полагаю, что простой запрос jane img по-прежнему является лучшим механизмом запроса, но я пытаюсь разработать лучшую реализацию «забей и забудь» с наименьшим количеством кода. Пока я знаю, что могу ...

OnError = "this.parentNode.removeChild (это)" OnLoad = "this.parentNode.removeChild (это)"

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

Мне нравится идея увидеть, будет ли this.src.readyState == "complete", но я вижу, что иду по пути совместимости браузеров и адских условий гонки, если было бы разумно подключиться к сообществу StackOverflow первый.

Кто-нибудь имеет опыт с этим и хорошее решение?

Answer 1

Почему бы просто не добавить тег img в ваш документ после его загрузки?

Answer 2

Вам нужно, чтобы он загружался асинхронно. Google делает один, если вы хотите что-то более тяжелое, eVisitAnalyst делает то же самое.

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

Answer 3

Это старый вопрос, но он начинается с дезинформации, и я не видел, чтобы кто-то исправил это. CoreMetrics, Adobe и многие другие не используют запросы изображений, которые загружаются на DOM, которые могут заблокировать страницу, они используют объекты изображений JS, например, outImage = new Image (); Это не привязывается к DOM и не блокируется так же, как тег изображения. Ответ в 1x1 пиксель просто соответствует MIME-типу, кстати.

Любой JS, загруженный для реализации тегов, оказывает гораздо большее влияние.

Answer 4

Вы можете POST с формой, предназначенной для iframe (тот же или другой домен в порядке).

И после совершения звонка вы можете удалить iframe или повторно использовать его.

Вот пример:

<form target="targetIfr" action="http://domain.com/" method="post">
    <input name="data" type="text" value="hello" />
</form>
<iframe name="targetIfr"></iframe>

Вы можете назвать это как:

frm.submit();
ifr.parentNode.removeChild(ifr);

Answer 5

Как показывает другой ответ, вы можете просто добавить тег img к изображению после загрузки документа.

Это вызывает две подзадачи: 1) как узнать, когда документ загружен, и 2) как добавить тег img. Я предлагаю использовать $(document).ready() из JQuery для 1) и некоторые манипуляции с DOM для 2) (также с JQuery).

Существуют методы определения, когда документ полностью загружен, и вставки тега, но использование инфраструктуры (альтернативы, кроме JQuery, должны быть в порядке, я просто предлагаю что-то, что, как я знаю, работает), экономит некоторые усилия, особенно когда сводится к тому, чтобы все работало в нескольких браузерах.

РЕДАКТИРОВАТЬ: опечатка

Answer 6

My PoV: на первом месте пользовательский опыт, на втором месте отслеживание. Я использовал WebTrends / Omniture & Coremetrics, и да, они дают очень мелкие детали (и позже вы можете сегментировать их так, как вы хотите) о запросе. Даже без этих поставщиков веб-аналитики вы можете получить много информации из журналов вашего сервера, вам просто нужно выполнить сегментацию самостоятельно (вы можете регистрировать IP-адреса в зависимости от ваших Условий и положений - и Omniture / Coremetrics делают это в любом случае, Pages запрошено, действие выполнено, как оформление заказа, добавление в корзину и т. д.). Хотя эти поставщики веб-аналитики очень осведомлены о производительности и просто отправляют вам 1x1 пиксель в качестве ответа, если их сервер работает медленно, ваш пользовательский интерфейс плохой (иногда это происходит гуглы для меня, я жду, пока это изображение загрузится очень долго). Я думаю, что лучший способ реализовать это будет после загрузки документа (jQuery - Document.ready?), А затем добавить <img src="vendor url"/> в html dom.Even, если запрос не выполняется или занимает много времени, теперь пользователь не чувствует, что сайт непригоден для использования