1

我提前为这个可能含糊的一般问题道歉，但最近我一直在想这个问题。

目前，我使用了几个按钮，这些按钮在悬停图像时会发生变化（在几个站点中）。有些是微妙的，背景颜色会发生变化，有些是 CSS 伪类悬停整个图像，有些使用 jQuery 悬停方法。似乎某些事情需要不同的策略。但是在将这些作为一个整体进行检查后，似乎我并没有真正使用一致的方法。

我的问题是，一般来说，最好的方法是什么，以使页面最快并保持一致？尽管它工作正常，但在我的 CSS 文件中多次调用图像似乎不是最佳做法。也许我错了。

但是，如果我有很多 jQuery 脚本正在运行，那似乎也有矛盾之处。我查看了其他站点，它们似乎有更多*.js文件，而不是在<head>. 例如，目前，我有一个包含大部分 jQuery 脚本的头文件。我这样做是因为我总是被教导将这些脚本保留在<head>标签中。例如，将脚本添加到更接近 HTML 代码以提高可读性会更好吗？

我应该将 JavaScript 移出到他们自己的文件中，并且只将它们包含在<head>? 我的页面工作得比较好，但是我还没有成功地说我有一个针对这种现象的框架。在我去重构这些页面之前，我正在尝试改进我的这种工作策略。

提前感谢您的任何意见。

4

3 回答 3

2

不要在 head 中包含 js 文件，使用RequireJS或 head.js 异步加载你的 js 文件。

hoover 仅使用 CSS 并将所有图像合并到一个精灵中，这样您将获得更快的页面加载。

于 2012-10-26T16:01:58.063 回答
1

您应该将常用功能放在单独.js的文件中，因为浏览器可以缓存它们。如果您将相同的 js 函数剪切并粘贴到每个 HTML 文件中，浏览器将需要在每个页面中下载它（至少在第一次加载时）。此外，它显然会更容易维护！

而且我倾向于尽可能使用css，因为至少当用户禁用 JavaScript 时它会起作用（假设他们的浏览器实际上实现了所有最新的 css 功能，他们可能不会！）。

于 2012-10-26T15:58:54.583 回答
1

您也可以使用 css 创建淡入淡出效果。如果您使用不同背景颜色的图像，则不要。您可以使用 CSS 获得良好的背景颜色和悬停效果。

<ul class="nav-fade">
   <li>Home</li>
   <li>Tutorials</li>
   <li>Articles</li>
</ul>

CSS 淡化这个菜单

.nav-fade li {
   background: #fff;
   padding: 3px 8px;
   display: inline-block;
   transition: background .25s ease-in-out;
   -moz-transition: background .25s ease-in-out;
   -webkit-transition: background .25s ease-in-out;
   }

   .nav-fade li:hover {
      background: #ddd;
      }

来源：http : //bavotasan.com/2011/a-simple-fade-with-css3/

于 2012-10-26T16:04:31.740 回答