javascript - 使用 jquery 顺利地为每个导航菜单更改站点的背景图像

Question

我为每个菜单使用 javascript 函数并在 onClick 事件中调用该函数。我遇到的是图像变化不流畅，有时加载缓慢。

让我们考虑 2 个链接，每个链接调用一个函数来更改主体的背景

这就是我现在的改变

function events(){
   $("body").css('background-image','url(./wp-content/Uploads/img3.jpg)');
}

function projects(){
   $("body").css('background-image','url(./wp-content/Uploads/img2.jpg)');
   return false;
}

HTML

<li id="projectsm"><a href="#projects" onClick="projects();" class="stylish">Projects</a></li>
<li id="eventsm"><a href="#events" onClick="events();" class="stylish">Events</a></li>

所以当我点击菜单时，它必须像淡出或平滑的东西一样变换，而不是闪烁

Answer 1

如果我理解您的问题，您可以在单击链接时使用 jQuery 更改正文背景图像，但它不够流畅/不够快。

我认为这主要是因为当您更改背景时，新背景尚未加载。所以它必须加载，然后在加载时更改。

解决方案:

• 您可以在文档加载时加载所有背景

• 您可以加载新的背景，然后调用您的切换函数

在这两种情况下，您都可以使用 ImagesLoaded 插件在需要时加载图像 (https://github.com/desandro/imagesloaded)。

然后如果你想要一个平滑的过渡，你可以在你的 body 选择器上使用 CSS3 Transition :

transition: background-image 1s ease-in-out;

但我不确定过渡是否适用于背景图像属性...