CODEWITHSUNDEEP
javascripthtmlcss
JSON_Derulo
JSON_Derulo

Reputation: 992

How to reduce noticeability of image loading?

I have a large image header. When the page is refreshed, the header flashes white and then black and then finally the image appears.

I really would like to remove this problem but have not had any success.

Upvotes: 0

Views: 63

Answers (2)

James Slattery
James Slattery

Reputation: 325

Try getting rid of the fadeIn animation on the '.slick-initialized .hero__image' css.

.slick-initialized .hero__image{opacity:1;-webkit-animation:fadeIn 1s cubic-bezier(0.44, 0.13, 0.48, 0.87);-moz-animation:fadeIn 1s cubic-bezier(0.44, 0.13, 0.48, 0.87);-o-animation:fadeIn 1s cubic-bezier(0.44, 0.13, 0.48, 0.87);animation:fadeIn 1s cubic-bezier(0.44, 0.13, 0.48, 0.87)}

Upvotes: 0

Scott Marcus
Scott Marcus

Reputation: 65815

First, it would be a good idea to have the background of the container element for the image be black (so that during the time when the image isn't being shown at least you won't see white), then you can apply a default CSS rule that the image is hidden by default. Then, using the load event, you can remove that CSS:

// Get reference to the image element
var img = document.querySelector("#img");

// Set up an event handler for when the image is fully loaded that removes
// the hidden class, thus revealing the image:
img.addEventListener("load", function(){
  img.classList.remove("hidden");
});
/* Set the size of the container to the size of the image and 
   set its background color to black.                        */
#container {
  height:2000px;
  width:2000px;
  background-color:#000;
}

.hidden { visibility:hidden; }
<div id="container">
   <img src="http://imgsrc.hubblesite.org/hvi/uploads/image_file/image_attachment/29911/STSCI-H-p1706a-m2000x2000.png" id="img" class="hidden">
</div>

Upvotes: 2

Related Questions