CODEWITHSUNDEEP
javascripthtmliframe
Cybernetic
Cybernetic

Reputation: 13334

Stop iframe from flashing white when changing its source via javascript

I have an iframe:

<iframe id="main_frame" src="first_url.html" style="visibility:hidden;" onload="this.style.visibility = 'visible';"></iframe>

As you can see it has been set to not be visible while loading. This ensures that no 'white flash' occurs while the frame loads. However, if I change the source of the iframe by clicking this button: 

<button onclick="change_view('new_url.html')">change view</button>

..where the javascript function to change the source is: 

 function change_view(url) {
          var site = url
          document.getElementById('main_frame').src = site
            }

then I get the white flash while the source changes. Is there is a way to change the source of the iframe without getting this white flash?

Upvotes: 2

Views: 3245

Answers (1)

csb
csb

Reputation: 336

You could try this

<iframe style="visibility:hidden;" onload="this.style.visibility = 'visible';" src="../examples/inlineframes1.html" > </iframe>

It hides iframe until fully loaded.

https://css-tricks.com/snippets/html/get-rid-of-white-flash-when-iframe-loads/

Upvotes: 3

Related Questions