时间戳

首页 > 解决方案 > 使用 Ajax 获取页面加载进度

javascript - 使用 Ajax 获取页面加载进度

问题描述

好吧，我是 Ajax 和 JQuery 的新手，我很难编译它。我正在尝试使用 ajax 导航加载 URL，并使用 popstate 检索前后导航。下面的代码运行良好，但我的问题是在使用Pace Page Progress Bar Plugin单击链接时集成我尝试加载的页面的进度指示器。

<html>
<head>
<meta charset="utf-8" />
<div id="render-me">
<title>jQuery Ajax Test</title>
<script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.gossipper.com/content/css/inspired-mob/styles/pace-theme-center-atom.css" />

  <script>
    paceOptions = {
  ajax: true, // disabled
  document: true, // disabled
  eventLag: true, // disabled
  elements: {
    selectors: ['#render-me']
  }
};
  </script>
  <script src="https://www.gossipper.com/content/css/inspired-mob/js/pace.js"></script>

<script type="text/javascript"><!--

$(document).ready(function(e){
    $.ajaxSetup ({
        cache: false
    });
    var page;
    $('a.lnk').click(function(){

        page = $(this).attr('href');

        $('#render-me').load(page + ' #render-me');

        if(page != location.href){
          window.history.pushState({path:page},'',page);
          $(window).bind("popstate", function() {
              link = location.pathname.replace(/^.*[\\/]/, ""); // get filename only
    $('#render-me').load(link + ' #render-me');
});
        }       

        return false;
    });
    document.addEventListener('gg', function(){
      document.querySelector('.pace').classList.remove('pace-inactive');
      document.querySelector('.pace').classList.add('pace-active');

      document.querySelector('.pace-progress').setAttribute('data-progress-text', percentComplete.value + '%');
      document.querySelector('.pace-progress').setAttribute('style', '-webkit-transform: translate3d(' + percentComplete.value + '%, 0px, 0px)');
    });
    $(window).on({
        popstate:function(e){
            page = location.href;
            $('#render-me').load(page + ' #render-me');
        }
    });

});
</script>
</head>
<body>
<h1>Web page test.html</h1>
<a href="https://www.gossipper.com/forum/general/news/22853-dino-melaye-injured-rushed-to-hospital-after-jumping-off-a-police-vehicle" title="Get extern" class="lnk">Get extern</a>

<div id="content">Initial content in test.html</div>

</body>
</div>
</html>

如上所述，我是 Ajax、JQuery 和 Javascript 的新手。我很难编译这个，我需要帮助才能让它工作。

标签： javascriptjqueryajax

解决方案

您的代码中的问题是您的速度脚本源、速度的 css 源以及 html 元素的正确放置。

我试图进入你的脚本和 css 的源代码，但没有找到。您不需要将所有元素封装在<div id="render-me">.

基于https://www.w3schools.com/html/html_head.asp

元素是元数据（关于数据的数据）的<head>容器，位于<html>标签和<body>标签之间。HTML 元数据是关于 HTML 文档的数据。不显示元数据。元数据通常定义文档标题、字符集、样式、链接、脚本和其他元信息。以下标签描述元数据：<title>、<style>、<meta>、<link>、<script>和<base>

所以你必须移除头部的 div，修复源并放入<div id="render-me">内部主体。

这是我修复的代码：https ://jsfiddle.net/uqbysq1a/1/

推荐阅读