优化jQuery代码

Question

我写了一段jQuery代码，用于在图像上淡入一些链接的覆盖层。当我添加大约10个这样的图像时，发现它非常缓慢。我希望能得到一些关于如何使这段代码更快的技巧和建议。

如果您对我的HTML和CSS有一些技巧，那就太好了 ;)

jQuery代码：

$(document).ready(function() {
var div = $(".thumb").find("div");
div.fadeTo(0, 0);
div.css("display","block");
$(".thumb").hover(
  function () {
      $(this).children(".download").fadeTo("fast", 1);
      $(this).children(".hud").fadeTo("fast", 0.7);
  }, 
  function () {
      div.fadeTo("fast", 0);
  }
);
});

所有的代码

<style type="text/css">
a:active {
    outline:none;
}
:focus {
    -moz-outline-style:none;
}
img {
    border: none;
}
#backgrounds {
    font: 82.5% "Lucida Grande", Lucida, Verdana, sans-serif;
    margin: 50px 0 0 0;
    padding: 0;
    width: 585px;
}
.thumb {
    margin: 5px;
    position: relative;
    float: left;
}
.thumb img {
    background: #fff;
    border: solid 1px #ccc;
    padding: 4px;
}
.thumb div {
    display: none;
}
.thumb .download {
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    padding: 0 10px;
}
.thumb .download h3 {
    font-size: 14px;
    margin-bottom: 10px;
    margin-top: 13px;
    text-align: center;
}
.thumb .download a {
    font-size: 11px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    line-height: 16px;
}
.thumb .download a:hover {
    text-decoration: underline;
}
.thumb .download .left, .thumb .download .right {
    width: 44%;
    margin: 0;
    padding: 4px;
}
.thumb .download .left {
    float: left;
    text-align: right;
}
.thumb .download .right {
    float: right;
    text-align: left;
}
.thumb img, .thumb .hud {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.thumb .hud {
    width: 100%;
    height: 110px;
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
var div = $(".thumb").find("div");
div.fadeTo(0, 0);
div.css("display","block");
$(".thumb").hover(
  function () {
      $(this).children(".download").fadeTo("fast", 1);
      $(this).children(".hud").fadeTo("fast", 0.7);
  }, 
  function () {
      div.fadeTo("fast", 0);
  }
);
});
</script>

<div id="backgrounds">


<div class="thumb">
    <div class="download">
    <h3>Download wallpaper</h3>
    <p class="left">
    <a href="1024x768.jpg">1024x768</a>
    <a href="1280x800.jpg">1280x800</a>
    <a href="1280x1024.jpg">1280x1024</a>
    </p>
    <p class="right">
    <a href="1440x900.jpg">1440x900</a>
    <a href="1680x1050.jpg">1680x1050</a>
    <a href="1920x1200.jpg">1920x1200</a>
    </p>
    </div>
    <div class="hud"></div>
    <img alt="image" src="thumb.jpg"/>
</div>



</div>

- mofle

---

终于看到一个带有所有相关代码的问题，太棒了 +1 - missaghi

Answer 1

我通过在hover(..)中简单地更改以下内容，使其反应更好:

  function () {
    $(".download", this).fadeTo("fast", 1);
    $(".hud", this).fadeTo("fast", 0.7);
  }, 
  function () {
    $(".download, .hud", this).fadeTo("fast", 0);
  }

最大的区别在于仅将hoverout效果应用于事件目标，无需重新应用于页面上的所有div。

- Mister Lucky

---

你对rizzle的解决方案有什么想法？ - Sindre Sorhus

我尝试了Rizzle的解决方案，与我的原始代码相比没有获得任何性能提升。 缓存查找很有趣，但在这里并没有获得任何大的收益。 替换存储的div（适用于所有div）是重要的部分。 - Mister Lucky

到目前为止，我还没有找到任何东西。只需经常尝试使用旧系统，以查看它们如何响应最低公共分母情况。 - Mister Lucky

Answer 2

尝试移除 :focus { -moz-outline-style:none; } 并查看发生了什么

- anon

---

我看不到它？除了在Firefox中单击某个东西时会出现轮廓之外，还应该发生什么？ - Sindre Sorhus

Answer 3

我已经将你的代码放到了一个测试页面中，老实说，即使有30个左右的.thumb divs，它看起来还不错——足够响应，可以从我的端口使用。滑动鼠标到它们中的一堆意味着我必须等待鼠标悬停效果通过它们所有的过程，这需要一段时间，直到它到达我实际停留的那一个，但是毫无疑问这就是你想要的，因为你使用的是“hover”，而不是“click”（后者肯定会消除任何速度问题）。

在我的测试页面中，我没有使用实际的图像，只是获取alt文本，所以我目前最好的猜测是确保你加载的所有图像都尽可能地小。

- Steerpike

Answer 4

预先选择更多

很好，预先选择 div。尝试这种方式，以便它也预先选择淡入元素，而不是在悬停时执行：

 $().ready(function() {
    var div = $(".thumb").find("div");
    div.fadeTo(0, 0);
    div.css("display","block");

    $(".thumb").each(function() {

      var download = $(this).children(".download");
      var hud = $(this).children(".hud");

      $(this).hover(
        function () {
            download.fadeTo("fast", 1);
            hud.fadeTo("fast", 0.7);
        }, 
        function () {
            div.fadeTo("fast", 0);
        }
      );

    });

  });

- rizzle

---

你在哪里设置div变量？这比Mister Lucky的解决方案更快吗？ - Sindre Sorhus

它与问题代码保持不变，我已经为您添加了它。 - missaghi

你真的运行了你的代码吗，Rizzle？它的反应几乎与原始代码相同，没有提供任何优化吗？ - Mister Lucky