Как дождаться загрузки картинки при переходе?

Question

[Андрей Павленко]

Добрый день!
Возникла необходимость узнать, перешел ли пользователь куда-то со страницы по ссылках или просто ушел сразу после перехода.
Решил сделать это так:

<script type="text/javascript">
function getPicture(){
    var image=new Image();
    image.src='some.site.ru/someimage.jpg';
    return true
}
document.onclick=getPicture
</script>

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

Upd.: Да, ответ будет именно 1x1 пиксель или вообще просто заголовки, здесь важен факт сообщения перехода по ссылке. Я уже тестировал метод window.onUnload, но я не понял, как отличить собственно закрытие окна браузера от ПЕРЕХОДА по ссылке. Возможно, вы подскажете, как это сделать?

Answer 1

[Никита]

Используйте обработчик события beforeunload. И в нём можно использовать синхронный запрос на адрес этой картинки (или любой другой ресурс) и браузер подвиснет, ожидая ответ сервера. В таком случае картинка загрузится и страница закроется. Но не рекомендую использовать такой метод, если картинка не 1х1 пиксель, это сильно будет раздражать

Comments

[Андрей Павленко]

Да, ответ будет именно 1x1 пиксель или вообще просто заголовки, здесь важен факт сообщения перехода по ссылке. Да, об этом я тоже подумал и даже тестировал это решение, но я не понял, как отличить собственно закрытие окна браузера от ПЕРЕХОДА по ссылке. Возможно, вы подскажете, как это сделать?

[Никита]

Андрей Павленко: Можно на каждую ссылку повесить обработчик события click. Одну функцию на каждый объект коллекции document.links и там также использовать синхронный запрос.

[Андрей Павленко]

oPOCCOMAXAo: а как сам запрос использовать, чтобы страница дождалась загрузки картинки, прежде чем уйти? Я повесил функцию как у вопросе, но он не дожидается загрузки, а сразу уходит

[Никита]

Андрей Павленко: как-то так
var xmlhttp = getXmlHttp()
xmlhttp.open('GET', '/xhr/test.html', false);
xmlhttp.send(null);
if(xmlhttp.status == 200) {
alert(xmlhttp.responseText);
}

[Никита]

ой не совсем то, правильнее будет так
var xhr = new XMLHttpRequest()
xhr.open('GET', 'url', false);
xhr.send(null);
if(xhr.status == 200) console.log(xhr.responseText);