it-roy-ru.com

Как отобразить диалог загрузки, когда кто-то нажимает на конкретную ссылку?

У меня есть URL, который открывает веб-страницу, которая загружается очень медленно, и я не могу ее контролировать.

Я хочу отобразить диалоговое окно загрузки, когда кто-то щелкает этот URL, или блокировать страницу с помощью оверлея div, когда это происходит.

Примечание: это не тот же вопрос, что и вопросы, связанные с ajax, это для обычных кликов по URL-адресам пользователя, а не для всех из них только для определенных.

<A href="http://veryslowload.com" onClick="...">slow load...</a>

Я полагаю, что я ищу то, что надеть onClick.

8
sorin

Вы можете сделать это :

$(function(){
​  $('a').click(function(){
     $('<div class=loadingDiv>loading...</div>').prependTo(document.body); 
  });​
});

Демонстрация (измените ссылку на очень медленную страницу для лучшего эффекта)

Но это зависит от страницы: если страница сразу отправляет некоторый контент, но не весь контент, у вас не будет времени, чтобы увидеть свой div.

6
Denys Séguret

Если вам также нужна анимация, это становится сложным делом, так как браузеры ведут себя по-разному. Некоторые останавливают все анимации GIF, когда начинает загружаться новая страница. По сути, все сводится к тому, что у вас есть jQuery и вы скачиваете библиотеку spin.js.

Смотрите рабочее решение здесь:

http://jsfiddle.net/7aJyP/

<style>
#loading {
    display:none;
    position:absolute;
    left:0;
    top:0;
    z-index:1000;
    width:100%;
    height:100%;
    min-height:100%;
    background:#000;
    opacity:0.8;
    text-align:center;
    color:#fff;
}

#loading_anim {
    position:absolute;
    left:50%;
    top:50%;
    z-index:1010;
}
</style>



<div id="loading"><div id="loading_anim"></div></div>

<a href="http://pangoo.it" class="mylinkclass withanimation">link</a>



<script>

$(function () {
    $(".withanimation").click(function(e) {
        e.preventDefault();
        $("#loading").show();

        var url=$(this).attr("href");

        setTimeout(function() {
            setTimeout(function() {showSpinner();},30);
            window.location=url;
        },0);

   });
});

function showSpinner() {
    var opts = {
      lines: 15, // The number of lines to draw
      length: 3, // The length of each line
      width: 4, // The line thickness
      radius: 30, // The radius of the inner circle
      rotate: 0, // The rotation offset
      color: '#fff', // #rgb or #rrggbb
      speed: 2, // Rounds per second
      trail: 70, // Afterglow percentage
      shadow: false, // Whether to render a shadow
      hwaccel: false, // Whether to use hardware acceleration
      className: 'spinner', // The CSS class to assign to the spinner
      zIndex: 2e9, // The z-index (defaults to 2000000000)
      top: 'auto', // Top position relative to parent in px
      left: 'auto' // Left position relative to parent in px
    };
    $('#loading_anim').each(function() {
        spinner = new Spinner(opts).spin(this);
    });
}
</script>

Если вы используете анимацию (GIF), анимация может зависнуть в некоторых браузерах. Я использовал библиотеку spin.js ( http://fgnass.github.com/spin.js/ ). В то время как GIF замораживаются, анимация javascript, кажется, работает.

Пожалуйста, протестируйте ВСЕ браузеры!

5
FrancescoMM

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

$('#mylink').click(function(e) {
    e.preventDefault();
    var url = this.href;
    // Update the UI here
    setTimeout(function() {
        // This is a trick to force a repaint
        window.location.href = url;
    },0);
});
2
bfavaretto

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

Три идеи приходят на ум.


Если у вас есть контроль над исходной страницей, но нет цели - используйте обработчик события click, чтобы заменить обычное поведение тегов чем-то вроде этого:

  1. Показать анимацию загрузки
  2. Запустить запрос AJAX по URL-адресу, определенному атрибутом href тега (альтернативно, создать скрытый URL-адрес в качестве источника)
  3. По завершении запроса замените содержимое документа ответом.

Тем не менее, это может быть очень проблематично, поскольку вы не потеряете javascript и css, определенные на исходной странице. Это также не изменит URL, отображаемый в браузере пользователя. 


Если у вас есть контроль над целью и вы можете сделать ее доступной для кэширования (даже на несколько секунд): вы можете загрузить страницу в фоновом режиме через AJAX, а затем перенаправить на нее. Первая загрузка будет медленной, затем редирект загрузит страницу из кеша.


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

1
AmericanUmlaut

первоначально сохраните spinner.gif где-нибудь в вашей форме и держите его скрытым , а также поместите src = ""

таким образом, не будет SRC для изображения

но позже при вызове ajax вы можете установить src для изображения счетчика, поэтому ваша страница будет загружаться

$(document).ready(function() {
            // bind 'myForm' and provide a simple callback function
               $("#tempForm").ajaxForm({
               url:'url to be called',
               type:'post',
               beforeSend:function()
               {
                   alert("this is the place where you place things to happen till your page is being transfered to the given URL so i am setting the src for the spinner image here");  
                   $("#spinner image ID").attr("src","../images/spinner.gif");
               },
               success:function(e){
               alert("do whatever you want with response here");
               }
        });
        });
0
Hussain Akhtar Wahid 'Ghouri'

Вы можете создать скрытый iframe и прослушать событие загрузки. Вам также потребуется выполнить ручную проверку примерно через 1 секунду, в случае, если пункт назначения заблокировал содержимое x-frame.

DEMO: http://jsbin.com/ijofih/1

$('a').click(function(e) {
    $(this).text('Loading...'); // do your UI thing here
    e.preventDefault();
    var destination = this.href;
    setTimeout(function() {
        window.location = destination;
    },1000);
    $('<iframe>').hide().appendTo('body').load(function() {
        window.location = destination;
    }).attr('src', destination);
});
0
David Hellsing

Это старая тема, но если вы хотите простое решение, не зависящее от JQuery, добавьте в onClick следующую ссылку:

<A href="http://veryslowload.com" onClick=""javascript:document.getElementById('page-loader').style.display='block';"">slow load...</a>

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

<div id="page-loader">
    <h3>Loading page...</h3>
</div>

и скрыть DIV с помощью CSS следующим образом:

#page-loader {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 10000;
display: none;
text-align: center;
width: 100%;
padding-top: 25px;
background-color: rgba(255, 255, 255, 0.7);
}

Вот JSfiddle для рабочего примера: http://jsfiddle.net/meb69vqd/

Я не могу взять полный кредит для этого примера. Есть дополнительные советы по этой технике здесь: https://css-tricks.com/css-page-loader/

0
Frank