1

我为一个大型网站工作（每月 5+ 百万次独立点击，大约 55-60 百万页面浏览量/展示次数）。

我们目前正在更新我们的可用性（tabindex、标签等）。

我正在使用 css 类和 jQuery（参见下面的代码）在表单提交（以及与 ajax 相关的部分页面刷新/更新等）上将光标类型更改为“进度”，以便用户立即知道“某事”正在发生，通过类名“loadWait.

 //css class
   body.wait *, body.wait {
    cursor:progress !important;
   }

   //jQuery
   $(document).ready(function() { 
      $('.loadWait').click(function(){
         progerssCursor();
      });
   });
   function progerssCursor(){
    $('body').addClass('wait');
   }
   function removeProgerssCursor(){
    $('body').removeClass('wait');
   }

   //example html   
   <input type="sumbit" class="loadWait" />
   <a href="..." class="loadWait" />

   //in ajax requests by calling functions "progressCursor()" and 
"removeProgressCursor" at the appropriate time/place

所以问题是：

  1. 这种方法是否有任何已知的“副作用”？（已经广泛搜索，找不到任何让我不相信的东西）。

  2. 我们正在讨论是否还应该将 class="loadWait" 附加到我们所有的链接（显然不是那些带有 target="_blank" 的链接，因为我们不希望光标在这种情况下改变）。你怎么认为？我们的理由是，有时，无论出于何种原因（服务器负载高、互联网连接速度慢等），用户“链接点击”和实际页面开始呈现之间可能会有几秒钟的奇怪延迟，这样用户会立即知道“某事”正在发生（我们知道选项卡中的加载图标在那里，但用户经常错过它）。你怎么认为？对我们所有的链接都这样做是不是太过分了？（这里不讨论工时）。

  3. 有谁知道这会增加什么样的额外页面加载时间（如果有）？（$('.loadWait').click(function(){... 是如何工作的？jQuery 是在页面加载时检查整个 DOM 以查找“click”事件，还是在“click by click”基础上检查匹配类名？）。

  4. 对此还有其他想法吗？

注意：此代码已由我们在 IE6-9、FF3.6、FF11、FF12、Opera、Safari（Windows）、Chrome 等上测试，没有已知/明显的错误/问题。

4

1 回答 1

1

我将继续通过#回答您的问题：

  1. 做你正在做的事情没有直接的副作用。但是，有些情况您是无能为力的，例如禁用 JavaScript 的用户。话虽如此，我知道 Chrome（至少是较新的版本）会在页面加载时自动将光标更改为加载图标，因此 Chrome 浏览器不需要这段额外的 JavaScript。然而，运行 JavaScript 的高流量站点不应该担心（参见 #2），除非 JS 是面向 ajax 的。
  2. 如果您尝试在链接点击上添加自定义加载指示器，那么为每个链接添加点击处理程序将是合适的方式。JavaScript 的好处是它纯粹是客户端。因此，尽管页面加载需要多长时间，但当用户点击“loadWait”链接时，它会首先触发 JavaScript，然后等待页面加载。因此，根据您所描述的服务器负载，这对实际单击链接的操作没有影响，因为您的作品都是客户端。
  3. 只要您的 JavaScript 位于正文的底部（应该是），页面加载时间就不会受到影响，因为在执行任何 JavaScript 之前所有 HTML 元素都已经加载。但是，如果您真的担心 click 事件不是一个非常繁重的 jQuery 函数，但就像任何 jQuery 函数一样，如果过度使用可能会导致最小的延迟。不过我怀疑这会是个问题，所以我想说，别担心，只要确保你的 JS 位于页面底部即可。
  4. 简要回到 #1：确保查看所有浏览器的固有功能，以便确定哪些浏览器（如 Chrome）已经提供此功能。

祝你好运，希望这对你有帮助！

编辑：还有一件事我忘了提。如果页面上有任何动态加载的 JavaScript，.click 事件将不会注册到该动态 JavaScript 中的任何链接。这是假设您的代码片段正在 $(document).ready 中触发。如果您要将其移至 $(window).load 会更合适。然而，更好的解决方案是利用 jQuery 的 .on 函数（以前是 .live）。on 函数将允许动态 JavaScript 也被绑定，但要注意：如果定期有很多动态 JavaScript，这可能会阻碍该 JavaScript 的性能。

于 2012-09-07T15:44:53.820 回答