Question

快速提问。我使用jquery来定位＆＃34; src＆＃34;我网站上的徽标属性。因此，当导航栏缩小（滚动）时，徽标将更改为同一图像的较轻版本。

当我在HTML中本地制作网站时，这种方法非常有效。当我将HTML上传到我的网络主机时，它甚至工作得很好。然而，当我开始将我的网站转移到Wordpress主题时，图像切换有大约第二次延迟。我想知道如果有人可以看看我的网站并告诉我可能是什么问题？ - 就像我说的那样，它在本地完美运行并以纯HTML格式上传。我是否需要以某种方式在jquery中预加载第二个图像？

我的网址是：http://iwebyou.com.au - 向下滚动并注意当导航栏缩小时，徽标切换有延迟。另外请忽略我网站的其余部分，未完成的其他内容现在完全混乱哈哈..

干杯

Answer 1

如果没有看到您的代码，很难进一步提供帮助，但IMO最好的解决方案是通过CSS类将徽标设置为背景图像，然后在需要时使用javascript更改css类，而不是修改图像src属性。

<div class="logo logo-dark">Company Name for SEO</div>

和

<div class="logo logo-light">Company Name for SEO</div>

的CSS：

.logo-dark {
  background-image: #fff url('path to dark logo') no-repeat center center;
}

.logo-light {
  background-image: #fff url('path to light logo') no-repeat center center;
}
.logo {
  // common logo styles
}

Answer 2

以下是使用opacity和transition的示例：

＆＃13;

window.addEventListener('scroll', e => {
  const nav = document.querySelector('.nav');
  if(window.scrollY > 50) {
    nav.classList.add('dark');
  }else {
    nav.classList.remove('dark');
  }
});

＆＃13;

img {
  width: 200px;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 500ms ease;
}
.light {
  opacity: 0;
}
.nav {
  background: white;
  position: fixed;
  top: 0;
  height: 60px;
  width: 100%;
  transition: all 500ms ease;
}
.nav.dark {
  background: black;
}
.nav.dark .dark {
  opacity: 0;
}
.nav.dark .light {
  opacity: 1;
}
.content {
  height: 1000px
}

＆＃13;

<div class="content">
  <div class="nav">
    <img src="https://www.iwebyou.com.au/wp-content/uploads/2018/06/cropped-I-Web-YouDark-2.png" class="dark" />
    <img src="https://www.iwebyou.com.au/wp-content/uploads/2018/06/I-Web-YouLight-2.png" class="light" />
  </div>
</div>

＆＃13;

我使用Jquery来定位＆＃34; src＆＃34;我的徽标属性

2 个答案: