Prevent iframe white flash issue while loading

I had a link on my website. I had written a click event for link to load iframe. But every time I was clicking the link, iframe was taking time to load and thus displaying white flash.

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.

13 comments:

mohd hafifi said...

come here from Malaysia =)

Anonymous said...

Thanks for sharing your solution Sagar! It looks like a great logical answer to this problem.

I am new to WordPress and I was wondering where do you place this code?

I am working in a TwentyEleven child theme that I have created. I have the files styles.css, header.php and footer.php so far. Anytime I add a function.php file to my template it seems to conflict / not override the parent themes functions.php. btw I am using pages and not posts. Is this enough information for you to be able to assist me?

Thanks once again! :)

Sagar said...

You asked two questions. So let me answer one by one.
1)Where I placed this code?
Ans: I have my MVC view inside which I have created script tag having this code. If you are new to MVC, on high level I have created a JS file having my above code and have include it on my page.
2)Is this enough information for you to be able to assist me.
-I am new to whatever you are using. But I am sure you have understood the logic very well. I just searched for you Jquery in php and found below article. Try whether below link along with my logic works for you. http://www.ibm.com/developerworks/opensource/library/os-php-jquery-ajax/ on Prevent iframe white flash issue while loading

Let me know whether it worked for you.

Ron said...

Thank you for this tip. It worked perfectly!

Anonymous said...

Thank you Sagar for replying to my post and for offering your advice. Now I understand what you have done, and yes although it is different to what I am using, I understand the logic.

I much appreciate you adding the link to the Jquery in php article and I will check that out.

Thanks

Sagar said...

It was my pleasure to help you to solve your problem. Do keep in touch for any further query/help.

Anonymous said...

I get pleasure from, result in I found exactly what I used to be having a look for.
You've ended my four day long hunt! God Bless you man. Have a great day. Bye
my site :: leon is awesome

Stacie said...

I was very excited when I saw this post as it seemed like a logical answer. However, it did not solve the problem for me, and I'm not getting any errors.

Sagar Wagh said...

Stacie, you are the first one for which this solution didn't work.
I doubt on iframe being getting hidden at your side.
There must be a reason for which the logic is not working. It will be great if you share any other solution that worked for you.

Pixelfreak said...

THANKS! this just saved me a migraine haha!

Anonymous said...

My spouse and I stumbled over here by a different page and
thought I might check things out. I like what I
see so now i'm following you. Look forward to looking into your web page again.



Feel free to visit my website :: http://www.coolbluediamond.com

Sagar Wagh said...

Hey Pixelfreak, great to hear that your are out of "iframe" trouble! :)

Sagar Wagh said...

RE:My spouse and I stumbled over here by a different page....

I would love if you get a great help by following these posts! :)

Post a Comment