更改背景图像时屏幕闪烁（悬停）

Simple idea. Page has a background image. When user hovers over some link, the image changes.

简单的想法。页面有一个背景图片。当用户将鼠标悬停在某个链接上时,图像会发生变化。

Here's the implementations: http://www.goel.io/ (hover over social links)

以下是实施:http://www.goel.io/(将鼠标悬停在社交链接上)

You'll notice a flash. I know that's because data transfer and rendering takes a small but noticeable time. Also, you can notice that during the image change, the new image is it's own original size and then resizes to the full screen.

你会注意到一瞬间。我知道这是因为数据传输和渲染需要很短但很明显的时间。此外,您可以注意到在图像更改期间,新图像是它自己的原始大小,然后调整大小到全屏。

This is the code for setting the background image:

这是用于设置背景图像的代码:

.bg {
    content: "";
    z-index: -1;
    position: fixed;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100%;
    width: 100%;
    background-image: url(/images/schemes/orange.svg);
    -moz-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    -webkit-transition: all 0.4s linear;
    transition: all 0.4s linear
}

And here's the code that changes the bg:

这是改变bg的代码:

$(".btn-blog").mouseover(function(e) {
    $(".bg").css("background-image", "url(/images/schemes/orange.svg)");
});

I've tried a bunch of stuff and looked at a bunch of things. Nothing seemed relevant.

我尝试了很多东西,然后看了很多东西。似乎没什么关系。

Any ideas on how to fix these 2 issues?

关于如何解决这两个问题的任何想法?

3 个解决方案

#1

Try using .fadeTo() , Array.prototype.concat() Array.prototype.splice()

尝试使用.fadeTo(),Array.prototype.concat()Array.prototype.splice()

$(function() {
  $.fx.interval = 0;
  (function(bg, btn) {
    btn.mouseover(function(e) {
      bg.fadeTo(75, 0.9, "linear", function() {
        bg.fadeTo(75, 1.0, "linear", function() {
          var img = bg.css("backgroundImage").split(", ");
          img = img.concat(img[0]).splice(1, 4).join(",");
          bg.css("backgroundImage", img)
        });
      })
    })
  }($(".bg"), $(".btn-blog")));
})

.bg {
  width: 100%;
  /* 100% */
  height: 100%;
  /* 100% */
  display: block;
  opacity: 1.0;
  z-index: -1;
  position: fixed;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%, 0px, 0px, 0px;
  background-image: url("http://lorempixel.com/300/300/nature"), url("http://lorempixel.com/300/300/cats"), url("http://lorempixel.com/300/300/sports"), url("http://lorempixel.com/300/300/technics");
  -webkit-transition: background-image -150ms linear;
  -moz-transition: background-image -150ms linear;
  -ms-transition: background-image -150ms linear;
  -o-transition: background-image -150ms linear;
  transition: background-image -150ms linear;
}
.btn-blog {
  font-size: 36px;
  text-align: center;
  border: 1px solid #fff;
  display: block;
  position: relative;
  left: 39%;
  top: 10px;
  width: 120px;
}
.btn-blog:hover {
  cursor: wait;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="bg">
  <span class="btn-blog">hover</span>
</div>

#2

You can use Link prefetching

您可以使用链接预取

<link rel="prefetch" href="/images/schemes/orange.svg">

But it doesn't work cross browser, so a safer way might be to load them as part of the page but hidden with css, if you do not wish to have the "flashing"

但它不能跨浏览器工作,所以更安全的方法可能是将它们作为页面的一部分加载但是用css隐藏,如果你不希望“闪烁”

#3

Why don't you make use of a css sprite and change the background image on :hover?

为什么不使用css sprite并更改背景图像:hover?