jquery - 我的 jQuery 加载脚本出现延迟

标签 jquery html get delay

我的代码在加载文件时出现延迟。我必须点击<a href="#string" id="hash"></a> 两次以使其显示 .txt 文件。

代码:

<script type='text/javascript'>
  $(document).ready(function(){
    $("a#hash").click(function(){
      var loc = $(window)[0].location;
      var getUrlString = $(loc).prop('hash').substr(1);
      $("p").load(getUrlString + '.txt');
    });
  });
</script>

<body>
  <p>This is a placeholder for your content</p>
  <a id="hash" href="#login">Login</button><br />
  <a id="hash" href="#register">Register</button><br />
  <a id="hash" href="#recovery">Recovery</button> 
</body>

例如,如果我在页面第一次加载时单击登录 - 它不会显示任何内容。 如果我在单击“登录”后单击“注册” - 它将显示“登录”。 如果我在单击“注册”后单击“恢复” - 它将显示“注册”,但如果我再次单击“恢复”,它将最终显示“恢复”。

抱歉我的英语不好,或者很难理解我的问题是什么。我仍在学习 jQuery,我发现如果我自己尝试/失败,然后找出问题所在,学习会更容易。仅阅读教程是不一样的:)

谢谢。

最佳答案

首先,ID 绝不能在您的页面中重复。如果您需要按标识符对元素进行分组,请使用类。

其次,您现在的方法存在的问题是,它会在窗口更改以反射(reflect)单击的 a 中的新 URL 之前读取窗口的 URL。这就是为什么您在出现之前会看到点击内容。如果您需要获取 URL 的哈希值,从被点击的链接的 href 属性中获取会更加容易和简单。

考虑到这一点,试试这个:

<script type='text/javascript'>
    $(document).ready(function(){
        $("a.hash").click(function() {
            var textfileName = $(this).attr("href").replace("#", "");
            $("p").load(textfileName + '.txt');
        });
    });
</script>

<body>
    <p>This is a placeholder for your content</p>
    <a class="hash" href="#login">Login</button><br />
    <a class="hash" href="#register">Register</button><br />
    <a class="hash" href="#recovery">Recovery</button> 
</body> 

Example fiddle

关于jquery - 我的 jQuery 加载脚本出现延迟,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9249880/

相关文章:

html - 从 googleusercontent.com 加载的图像上的 HTTP 403

来自另一个函数的 Python tkinter get()

用于下载图像的 ruby​​ http 超时

javascript - 主动管理仪表板 rails 中的图表集成

javascript - 使用数据链接通过 jquery 显示和隐藏 div

javascript autoclick 似乎没有自动点击

jquery - 使悬停图像对齐中心

css - 如何为页面的一部分隔离 css?

javascript - Text Not Ellipsis 在某些时候使用 jQuery 插件

javascript - 将 href 包裹在 iframe 周围