CODEWITHSUNDEEP
jqueryhtmlcss
KGo
KGo

Reputation: 20014

Screen flashes when changing background image (hover)

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)

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:

$(".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?

Upvotes: 0

Views: 1288

Answers (3)

guest271314
guest271314

Reputation: 1

Try using .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>

Upvotes: 1

Ibanez
Ibanez

Reputation: 409

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

Upvotes: 0

Lee Gary
Lee Gary

Reputation: 2397

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"

Upvotes: 0

Related Questions