CSS rgba background color loading before opacity

Question

I have an image taking up the whole viewport. Over top of it is a div, also taking up the whole viewport. The div has background: rgba(0,0,0,.5); to make the image behind it look darker. It works great, except that when the page is loading, the whole screen is covered with gray before opacity is applied and I can see the image underneath.

Is there any way to make the image and the div (with opacity applied) appear at the same time? I don't want to see the big block of gray while the page is loading.

Answer 1

This should do it for you https://jsfiddle.net/c259LrpL/26/

This will wait till images are loaded then make the img and the div visible at the same time... I think

<img id="img1" src="http://lorempixel.com/1200/1200/sports/1/"  style="visibility: hidden" >
<div id="over" style="visibility: hidden" > 

</div>
<script>
  $(window).on("load", function() {
    $("#img1").css("visibility", "visible");
    $("#over").css("visibility", "visible");
  }); 
</script>