что я могу положить до загрузки?

Question

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

В настоящее время я использую это:

window.onbeforeunload = function (){
    alert("test");
    console.log("test");
    sliderIntervalId = setInterval('SlideDown()',1);
}

Несмотря на то, что «test» действительно регистрируется на консоли, ни функция slideDown, ни тестовое предупреждение не генерируются ...

Это нормальное поведение?мы можем использовать функцию beforeunload только для внутренних целей?

PS Я тестирую на Chrome, поэтому мне пришлось использовать onbeforeUnload iso onUnLoad, который, похоже, не поддерживается Chrome?

Answer 1

onbeforeunload может задержать выгрузку страницы в только в одном случае: когда возвращается оператор return с определенным значением. В этом случае пользователь получает диалоговое окно подтверждения, которое предлагает пользователю возможность не покидать страницу.

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

[User] Navigates away to http://other.website/
[Your page] Fires `beforeunload` event
[Your page] `unload` event fires
[Browser] Received response from http://other.website/
[Browser] Leaves your page
[Browser] Starts showing content from http://other.website/

Answer 2

Для краткости предположим, что jQuery:

$('nav a').click(function (e) {

    //ignore any "modified" click that usually doesn't open in the current window
    if (e.which > 1 || e.shiftKey || e.altKey || e.metaKey || e.isDefaultPrevented()) {
        return;
    }

    //where you going here?
    var place = this.href;

    //you're not going anywhere, buddy
    e.preventDefault();

    //watch me dance, first
    $('.animate-me').fadeOut(1000, function afterAnimation () {

        //you're free to go!
        document.location = place;
    });
});

В основном вы не используете onbeforeunload.Одним из преимуществ является то, что вы можете удерживать пользователя столько времени, сколько хотите, а один недостаток - то, что пользователь не будет видеть анимацию при использовании ссылки за пределами nav (но вы можете просто изменить селектор)

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

Answer 3

Я работаю с onbeforeunload, и я смог выяснить:

• Обработчик onbeforeunload блокирует браузер от уничтожения текущей страницы
• если вы ничего не вернете, всплывающее окно не появится.

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

Таким образом, есть только один способ остановить выгрузку браузера до завершения анимации:

• поместить блокирующий цикл, который тратит некоторое время в обработчике beforeunload
• запустить анимацию CSS3, установив соответствующий класс для элемента перед циклом
• завершить цикл по окончании анимации (сделать проверку фактической высоты элемента или чего-либо еще)

О, и да, это самый неприятный взлом из всех, но я смог найти способ остановить браузер от выгрузки страницы, верно?

Буду признателен за комментарии с идеями о том, что включить в цикл. Я принимаю во внимание некоторые варианты:

• тратить процессор на математику в больших количествах
• доступ к локальному хранилищу (синхронный вызов, работа ввода-вывода)
• доступ к DOM (это решение уже должно)

Есть идеи?

Answer 4

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

document.getElementById('home').onclick(function(){
     yourAnimationFunction(function(){
          window.location="example.com";
     });  
});

много работы и не будет SEO дружественным, однако