I tried to get help from internet, found many solutions with css and javascript, but they were either complex to implement or unable to solve this problem.
I wonder why I didn't try anything with JQuery and when I tried, the issue was solved!
Below is the logic that I followed:
To explain the solution let's take below as my link and iframe ids.
my link id: dwnloadDoc
my iframe id: myiframe
Step1: Write iframe load event in jquery as given below.
$('#myiframe').load(function(){
$(this).show();
});
Step2: Hide iframe on link click
$('#dwnloadDoc').click(function(){
$('#myiframe').hide();
//link click logic
});
How It worked:
When I will click the link, my iframe will get hidden. I will bring data from server and will load it in iframe.
My iframe load event will get called after iframe is loaded which will show the iframe.
That means iframe will be hidden in its loading period, avoiding white flash.
