html - 替换相同的图片 url 在多大程度上影响不同浏览器的性能？

Question

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

情况是：有一个菜单栏，我想仅在显示时将图像添加到图标中：

例如

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选择器而不是检查显示属性的值。

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

Answer 2

建议使用 CSS 设置背景图片。在这里你只是隐藏和显示菜单。无需通过 javascript (jQuery) 来完成。

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

为了更好的方法，您需要预加载图像或通过 CSS 来完成。