Как реализован скрипт загрузки на этом сайте?

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

альтернативный текст

http://www.cssjockey.com/

Ответов (3)

Он использует jQuery ajaxStart и ajaxStop

$("#loading").ajaxStart(function(){ 
  $(this).show(); 
});
$("#loading").ajaxStop(function(){ 
  $(this).hide(); 
});

Это в основном позволяет ему показывать это загружаемое изображение во время выполнения любого асинхронного вызова.

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

Он использует: http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/ .

Однако он не использует все возможности (см. Демонстрацию по указанному выше URL). Полоса загрузки - это просто анимированный файл в формате gif. Думаю, вы можете получить его на http://ajaxload.info .

Надеюсь, это поможет. :)

Если вы посмотрите на сайт с помощью firebug , вы увидите, что автор использует фреймворк jQuery JavaScript для реализации панели загрузки.

Соответствующий код, найденный в http://www.cssjockey.com/wp-content/themes/cj_pro/scripts/custom.js скрипте в <head> разделе

$(window).load(function(){
$("#loading").addClass("hidden");
});
 $("#loading").ajaxStart(function(){
 $(this).show();
 });
 $("#loading").ajaxStop(function(){
 $(this).hide();
 });

где loading это идентификатор для div, содержащего загружаемое изображение в формате gif