Question

在以下浏览器中： IE8 +，firefox，chrome

案例是：有一个菜单栏，我想在图片显示时将图片添加到图标中：

e.g。

if ($('#menu').css('display') != 'none') {
   $('#icon1').attr('background-image','url("a.jpg")');
}

与

比较

if ($('#menu').css('display') != 'none') {
   if ($('#icon1').attr('background-image') == '') {
        $('#icon1').attr('background-image','url("a.jpg")');
   }
}

然而，它们都有相同的效果，哪一个更有效？我怀疑像Chrome这样的现代浏览器会更好地使用案例1，这是真的吗？感谢

Answer 1

最好使用:visible选择器，而不是检查display propery的值。

if ($('#menu').is(':visible')) {
   $('#icon1').attr('background-image','url("a.jpg")');
}

Answer 2

建议使用CSS设置背景图像。在这里，您只需隐藏并显示菜单。无需通过javascript（jQuery）来完成。

当您显示菜单时，它将加载图像，然后在页面上显示。

为了更好的方式，您需要预加载图像或通过CSS执行。

在什么程度上替换相同的图像url会影响不同浏览器的性能？

2 个答案: