Подтвердить что ты не робот

Индикатор выполнения на YouTube

Я пытаюсь создать индикатор выполнения YouTube. Панель должна загружаться при запуске страницы. Я пробовал это до сих пор. Вот код моего script

$({property: 0}).animate({property: 105}, {
    duration: 4000,
    step: function() {
        var _percent = Math.round(this.property);
        $('#progress').css('width',  _percent+"%");
        if(_percent == 105) {
            $("#progress").addClass("done");
        }
    },
    complete: function() {
        alert('complete');
    }
});

Я также включаю jsFiddle того же самого, http://jsfiddle.net/ajaSB/3/.

В этом jsfiddle появляется индикатор выполнения, но когда я использую тот же код в своей среде IDE и запускаю файл, индикатор выполнения не появляется. Что я делаю не так? Или, если есть другой способ получить бар?

4b9b3361

ОТВЕТЫ

Ответ 1

Вот пример полной страницы HTML, включая ссылку на библиотеку jQuery.

Хотя в основном это будет работать, вы должны обернуть свой код в $(document).ready(...), чтобы убедиться, что все необходимые ресурсы загружены до запуска кода.

<!DOCTYPE html>
<html>
  <head>
  <title>Progress Test</title>

  <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function(){
      $({property: 0}).animate({property: 105}, {
        duration: 4000,
        step: function() {
          var _percent = Math.round(this.property);
          $("#progress").css("width",  _percent+"%");
          if(_percent == 105) {
            $("#progress").addClass("done");
          }
        },
        complete: function() {
          alert("complete");
        }
      });
    });
  </script>

  <link href="css/progressbar.css" rel="stylesheet" type="text/css" />

  </head>
  <body>
    <div id="progress" class="waiting">
  </body>
</html>

Обратите внимание, что это предназначено для версии 2 jQuery, которая не поддерживает Internet Explorer 8 и ранее. Если вам нужна поддержка старых версий Internet Explorer, вам следует вместо этого настроить таргетинг на jQuery 1.10.2.

Если индикатор выполнения не отображается, но вы получаете alert("complete") через четыре секунды, когда анимация должна быть закончена, вполне вероятно, что ваша ссылка на CSS неверна (не указывая на нужное место или с ошибкой имя файла).

Ответ 3

Демо: Fiddle

Попробуйте использовать следующий код. Вы должны запустить этот файл на свой локальный хост (локальный сервер).

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $( document ).ready(function() {
        $({property: 0}).animate({property: 105}, {
            duration: 4000,
            step: function() {
                var _percent = Math.round(this.property);
                $('#progress').css('width',  _percent+"%");
                if(_percent == 105) {
                    $("#progress").addClass("done");
                }
            },
            complete: function() {
                alert('complete');
            }
        });
    });
</script>
<style>
    #progress {
        position: fixed;
        z-index: 2147483647;
        top: 0;
        left: -6px;
        width: 0%;
        height: 2px;
        background: #b91f1f;
        -moz-border-radius: 1px;
        -webkit-border-radius: 1px;
        border-radius: 1px;
        -moz-transition: width 500ms ease-out,opacity 400ms linear;
        -ms-transition: width 500ms ease-out,opacity 400ms linear;
        -o-transition: width 500ms ease-out,opacity 400ms linear;
        -webkit-transition: width 500ms ease-out,opacity 400ms linear;
        transition: width 500ms ease-out,opacity 400ms linear
    }
    #progress.done {
        opacity: 0
    }
    #progress dd,#progress dt {
        position: absolute;
        top: 0;
        height: 2px;
        -moz-box-shadow: #b91f1f 1px 0 6px 1px;
        -ms-box-shadow: #b91f1f 1px 0 6px 1px;
        -webkit-box-shadow: #b91f1f 1px 0 6px 1px;
        box-shadow: #b91f1f 1px 0 6px 1px;
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
        border-radius: 100%
    }
    #progress dd {
        opacity: 1;
        width: 20px;
        right: 0;
        clip: rect(-6px,22px,14px,10px)
    }
    #progress dt {
        opacity: 1;
        width: 180px;
        right: -80px;
        clip: rect(-6px,90px,14px,-6px)
    }
    @-moz-keyframes pulse {
        30% {
            opacity: 1
        }
        60% {
            opacity: 0
        }
        100% {
            opacity: 1
        }
    }
    @-ms-keyframes pulse {
        30% {
            opacity: .6
        }
        60% {
            opacity: 0
        }
        100% {
            opacity: .6
        }
    }
    @-o-keyframes pulse {
        30% {
            opacity: 1
        }
        60% {
            opacity: 0
        }
        100% {
            opacity: 1
        }
    }
    @-webkit-keyframes pulse {
        30% {
            opacity: .6
        }
        60% {
            opacity: 0
        }
        100% {
            opacity: .6
        }
    }
    @keyframes pulse {
        30% {
            opacity: 1
        }
        60% {
            opacity: 0
        }
        100% {
            opacity: 1
        }
    }
    #progress.waiting dd,#progress.waiting dt {
        -moz-animation: pulse 2s ease-out 0s infinite;
        -ms-animation: pulse 2s ease-out 0s infinite;
        -o-animation: pulse 2s ease-out 0s infinite;
        -webkit-animation: pulse 2s ease-out 0s infinite;
        animation: pulse 2s ease-out 0s infinite
    }
</style>
<div id="progress" class="waiting">
    <dt></dt>
    <dd></dd>
</div>

Или:

Просто загрузите этот файл на свой сервер, а затем выполните файл. Определенно это работает.

Ответ 4

LoadingBar.js: добавление панели загрузки YouTube-Like на ваш сайт

Недавно YouTube добавил красную панель загрузки в верхней части страницы, чтобы указать, что загружается следующая страница. Вы можете задаться вопросом, почему они не полагались на панель загрузки браузеров. Это потому, что следующая страница загружается с помощью Ajax, которая не запускает обычный механизм загрузки страницы. То почему браузер не взял его. Как некоторые из вас могут знать, загрузка всего содержимого через Ajax может сделать ваш сайт загружаемым быстрее, чем обычным способом.

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

DEMO

ЗАГРУЗИТЬ

Создайте панель загрузки YouTube-Like для веб-сайта

Как упоминалось в сообщении блога Дмитрия Фадеева на сайте UsabilityPost, многие разработчики все больше интегрируют этот шаблон пользовательского интерфейса на свои веб-сайты. Сегодня я решил создать плагин jQuery, который позволит вам добавить панель загрузки для любых ссылок Ajax на вашем сайте. Позвольте мне показать вам, как это работает.

Основное использование

Разметка HTML

<a href="<<URL>>" class="ajax-call">..</a>
<div id="loadingbar-frame"></div>

JavaScript

$(".ajax-call").loadingbar({
  target: "#loadingbar-frame",
  replaceURL: false,
  direction: "right",

  /* Default Ajax parameters.  */
  async: true, 
  complete: function(xhr, text) {},
  cache: true,
  error: function(xhr, text, e) {},
  global: true,
  headers: {},
  statusCode: {},
  success: function(data, text, xhr) {},
  dataType: "html",
  done: function(data) {}
});

Настройка CSS

#loadingbar {
    background: YOUR COLOR;
}

#loadingbar dd, #loadingbar dt {
  -moz-box-shadow: YOUR COLOR 1px 0 6px 1px;
  -ms-box-shadow: YOUR COLOR 1px 0 6px 1px;
  -webkit-box-shadow: YOUR COLOR 1px 0 6px 1px;
  box-shadow: YOUR COLOR 1px 0 6px 1px;
}

И вот оно. Теперь у вас будет потрясающая панель загрузки для всех ваших вызовов Ajax. Надеюсь, вам понравится:)

Ответ 5

Если вы хотите, чтобы для вашего приложения AJAX действительно был загружен "похожий на YouTube" загрузчик, который фактически представляет собой законный ход загрузки страницы, рассмотрите следующее решение (основанное на ответе Натана Шриви):

В вашем методе .ajax():

$.ajax 
( 
  { 
...
    xhr: function() 
    { 
      var xhr = new window.XMLHttpRequest();

      //Upload progress
      xhr.upload.addEventListener
      (
        "progress",
        function( event)
        {
          if( event.lengthComputable )
          {
            var percentComplete = Math.round( ( ( event.loaded / event.total ) * 100 ) );

            // Do something with upload progress
            $( '#progress' ).css( { 'width':  percentComplete + '%' } );

            if( percentComplete == 100 )
            {
              $( '#progress' ).addClass( 'finished' );
              $( '#progress' ).delay( 500 ).queue
              (
                'fx',
                function( next )
                {
                  $( '#progress' ).addClass( 'notransition' );
                  $( this ).css( { width: '' } );
                  $( this ).removeClass( 'finished' );
                  next();
                }
              );
            }
          }
        },
        false
      );

      //Download progress
      xhr.addEventListener
      (
        "progress",
        function( event )
        {
          if( event.lengthComputable )
          {
            var percentComplete = Math.round( ( ( event.loaded / event.total ) * 100 ) );

            // Do something with upload progress
            $( '#progress' ).css( { 'width':  percentComplete + '%' } );

            if( percentComplete == 100 )
            {
              $( '#progress' ).addClass( 'finished' );
              $( '#progress' ).delay( 500 ).queue
              (
                'fx',
                function( next )
                {
                  $( '#progress' ).addClass( 'notransition' );
                  $( this ).css( { width: '' } );
                  $( this ).removeClass( 'finished' );
                  next();
                }
              );
            }
          }
        },
        false
      );

      return xhr;
    },
...
    success: function( data, textStatus, xhr )
    {
      ...
      // Reset our ajax loading progress bar
      $( '#progress' ).removeClass( 'notransition' );
      ...
    }

Затем, в вашем css; используйте это:

#progress {
  position: fixed;
  opacity: 1;
  z-index: 2147483647;
  top: 0;
  left: -6px;
  width: 0%;
  height: 2px;
  background: #b91f1f;
  -moz-border-radius: 1px;
  -webkit-border-radius: 1px;
  border-radius: 1px;
  -moz-transition: width 500ms ease-out,opacity 400ms linear;
  -ms-transition: width 500ms ease-out,opacity 400ms linear;
  -o-transition: width 500ms ease-out,opacity 400ms linear;
  -webkit-transition: width 500ms ease-out,opacity 400ms linear;
  transition: width 500ms ease-out,opacity 400ms linear;
}
#progress.finished {
  opacity: 0 !important;
}
#progress.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}

#progress dd,#progress dt {
  position: absolute;
  top: 0;
  height: 2px;
  -moz-box-shadow: #b91f1f 1px 0 6px 1px;
  -ms-box-shadow: #b91f1f 1px 0 6px 1px;
  -webkit-box-shadow: #b91f1f 1px 0 6px 1px;
  box-shadow: #b91f1f 1px 0 6px 1px;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
}
#progress dd {
  opacity: 1;
  width: 20px;
  right: 0;
  clip: rect(-6px,22px,14px,10px); 
}
#progress dt {
  opacity: 1;
  width: 180px;
  right: -80px;
  clip: rect(-6px,90px,14px,-6px);
}
@-moz-keyframes pulse {
  30% {
    opacity: 1
  }
  60% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
@-ms-keyframes pulse {
  30% {
    opacity: .6
  }
  60% {
    opacity: 0
  }
  100% {
    opacity: .6
  }
}
@-o-keyframes pulse {
  30% {
    opacity: 1
  }
  60% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
@-webkit-keyframes pulse {
  30% {
    opacity: .6
  }
  60% {
    opacity: 0
  }
  100% {
    opacity: .6
  }
}
@keyframes pulse {
  30% {
    opacity: 1
  }
  60% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
#progress.waiting dd,#progress.waiting dt {
  -moz-animation: pulse 2s ease-out 0s infinite;
  -ms-animation: pulse 2s ease-out 0s infinite;
  -o-animation: pulse 2s ease-out 0s infinite;
  -webkit-animation: pulse 2s ease-out 0s infinite;
  animation: pulse 2s ease-out 0s infinite
}
#progress.notransition dd,#progress.notransition dt {
  -moz-animation: none !important;
  -ms-animation: none !important;
  -o-animation:  none !important;
  -webkit-animation:  none !important;
  animation:  none !important;
}

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

Чтобы он работал на начальной загрузке страницы (т.е. фактически не отображал законный прогресс), используйте метод, который Натан Шриви упоминает в функции document.ready выше и выше того, что я уже упомянул:

$( document ).ready(function() {
    $({property: 0}).animate({property: 105}, {
        duration: 4000,
        step: function() {
            var _percent = Math.round(this.property);
            $('#progress').css('width',  _percent+"%");
            if(_percent == 105) {
                $("#progress").addClass("done");
            }
        },
        complete: function() {
            alert('complete');
        }
    });
});

Наконец,

Вам нужно будет убедиться, что заголовки "Content-Length" отправляются в браузер для правильной работы загрузчика этого проекта... в противном случае член event.lengthComputable разрешает false... и не имеет никакого прогресса бар загрузится.

HTH, не стесняйтесь редактировать несоответствия.

Ответ 7

Код от TalkersCode.com и учебник здесь http://talkerscode.com/webtricks/display-progress-bar-while-page-loads-using-jquery.php

function check_element(ele)
{
 var all = document.getElementsByTagName("*");
 var totalele=all.length;
 var per_inc=100/all.length;

 if($(ele).on())
 {
  var prog_width=per_inc+Number(document.getElementById("progress_width").value);
  document.getElementById("progress_width").value=prog_width;
  $("#bar1").animate({width:prog_width+"%"},10,function(){
  if(document.getElementById("bar1").style.width=="100%")
  {
    $(".progress").fadeOut("slow");
  }         
  });
 }

 else   
 {
  set_ele(ele);
 }
}

Ответ 8

Вы можете получить плагин для индикатора прогресса
Я опубликовал его на GitHub

https://github.com/shashibeit/progressbar

вам нужно будет включить в свой проект и вызвать функции ниже

Progress.start(); Progress.go(20); Progress.go(30); Progress.go(80); Progress.go(100); Progress.complete();