问题
I am using an iframe in my project and it seems that whenever it loads content on a opacity background - it flashes "white" for around 1 second before correctly appearing.
It seems that it fires loaded event before the jQuery script is ready. I have tried
style="visibility:hidden;" onload="this.style.visibility = 'visible';"
but doesn't work. Any other ideas to get rid of this ?
回答1:
Try using:
style="display:none" onload="this.style.display = 'block';"
visibility:hidden doesn't actually "hide" the element as such - it still takes up the space it would if it were visible. display:none actually makes the element completely invisible, as if it doesn't exist.
回答2:
If you have control over the framed page - Set your background color on that page to transparent. Most browsers are white by default
回答3:
I had some difficulty with getting:
style="display:none" onload="this.style.display = 'block';"
to work in my situation on Chrome and Safari.
If these aren't working for you, try:
style="opacity: 0;" onload="this.style.opacity = 1;"
回答4:
I had exactly this problem, and tried all the remedies on this page without success. It was flashing on Chrome, not FireFox.
What worked for me was changing:
$("#iframe").prop('src', url);
to
$("#iframe").attr('href', url);
来源：https://stackoverflow.com/questions/2351232/iframe-flashes-white-on-load