iframe initialization is very slow

Bryce

unread,

Feb 27, 2012, 12:37:16 PM2/27/12

to fancybox

Awesome product so far!

Question about iframe initialization. Originally I applied fancybox
to the ".fancybox" group after the body loads:
$(".fancybox").fancybox({
'overlayColor':'#000',
'padding':0,
'margin':0,
'scrolling':'no',
'transitionIn':'none',
'transitionOut':'none',
'centerOnScroll':true,
'autoDimensions':true
});

...which corresponds to a few links that call iframes, such as:
Welcome back, <a href="include/boxes/doProfile.php" class="fancybox"
><?php echo $name; ?></a>

Interestingly, doProfile.php actually contains its own iframe, but I
don't think that's of real importance to the issue.

Then, in order to reduce lag time, I decided to initialize fancybox
per the link above *immediately* after the link is drawn on screen.
Just a simple inline <script> doing the same initialization.

Problem is that it takes a long time for this initialization to
occur. Although moving the init code right after the link helped, it
still takes about 3 seconds before the link is clickable! Clicking
the link too early brings up errors such as:

Unable to get value of the property 'hide': object is null or
undefined
jq.fancybox.js, line 19 character 282

(Prior to moving the init code out of body onLoad, clicking too early
would simply follow the link instead of showing a fancybox popup).

What can I do to solve this problem? Thanks!

JFK

unread,

Feb 27, 2012, 2:40:48 PM2/27/12

to fancybox

have you tried using 'type':'iframe' in your custom script? (you may
also need to set width and height)
check http://fancybox.net/api

Bryce

unread,

Feb 27, 2012, 3:22:23 PM2/27/12

to fancybox

Hi,

Just tried it. Unfortunately that didn't seem to help.

On Feb 27, 11:40 am, JFK <jfk.d...@gmail.com> wrote:
> have you tried using 'type':'iframe' in your custom script? (you may
> also need to set width and height)

> checkhttp://fancybox.net/api

Bryce

unread,

Feb 28, 2012, 2:14:48 PM2/28/12

to fancybox

Only 1 bump, then I'll surrender on this issue...

If it helps, check out the template site I'm building. The site is
not really functional yet, but should be enough to demonstrate the
fancybox issue:
www.gamemazing.com/v5

The "login" and "register" links at the top of the page are the issue
here. Click too early and they throw a JS error and stop responding.

I removed the suggested fix about specifying type as 'iframe' as it
didn't make any difference.

Thanks!

JFK

unread,

Feb 28, 2012, 9:41:26 PM2/28/12

to fanc...@googlegroups.com

You see now what a difference when you guys provide a link with the issue ... then we can figure out what the problem could be.

Your issue is explained here
http://fancybox.net/howto No. 5

hint:

$(document).ready(function() { .....

Bryce

unread,

Feb 29, 2012, 4:41:49 AM2/29/12

to fancybox

Unfortunately that's not a viable fix, and is why I wrote the custom
init code inline in the first place.

The problem with document.ready() is that it only fires after the
ENTIRE page loads, which is terrible if you have any sort of displayed
advertising. Some of the ads don't load for a good 5+ seconds, and I
can't have the entire site uninitialized during that time.

I guess I'll have to either kluge it (write some custom link-click
event handlers based on fancybox status) or just use another
lightbox. :-(

On Feb 28, 6:41 pm, JFK <jfk.d...@gmail.com> wrote:
> You see now what a difference when you guys provide a link with the issue
> ... then we can figure out what the problem could be.
>

> Your issue is explained herehttp://fancybox.net/howtoNo. 5

Paulo Silva

unread,

Feb 29, 2012, 7:09:34 AM2/29/12

to fanc...@googlegroups.com

So, you cant help me?

Because I made the code like...

|| code [ index.html ] file||

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>FancyBox 1.3.4 | Demonstration</title>

!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');

</script>

$(document).ready(function() {

$("a#facebook").fancybox();

});

</script>

</head>

</body>

</html>

|| end of the code [ index.html ] file ||

Now, the image appears but I want to put an "click" in the image ... they click and go to facebook...

Please, try something and I test here...

Gratefully,
Fred

--
You received this message because you are subscribed to the Google Groups "fancybox" group.
To post to this group, send email to fanc...@googlegroups.com.
To unsubscribe from this group, send email to fancybox+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/fancybox?hl=en.

Bryce

unread,

Mar 1, 2012, 1:53:03 AM3/1/12

to fancybox

@Paulo Silva:
Uh what...? Why did you post that on this thread? Anyhow, your issue
is HTML, not fancybox-specific. Look at basic anchor tag
documentation: http://www.w3schools.com/tags/tag_a.asp

@JFK:
Thanks for the help so far. Know of any way to quickly initialize the
iframe in fancybox without waiting for document.ready()? Or what's
happening behind-the-scenes that takes so long for fancybox to start
handling events? Why can't it respond immediately after the JS file
is loaded? Or am I beating a dead horse? :-P

Thanks,
Bryce

Jan Wilson

unread,

Mar 1, 2012, 8:49:25 AM3/1/12

to fanc...@googlegroups.com

Maybe this will help:

http://docs.jquery.com/Tutorials:Introducing_$%28document%29.ready%28%29

--
Jan Wilson

Bryce

unread,

Mar 7, 2012, 2:00:49 PM3/7/12

to fancybox

I'm still seeing a huge delay associated with initialization. I
settled on display: none for the fancybox links until $
(document).ready() triggers. Despite the docs you provided, it still
doesn't trigger until long after the main page's DOM is finished,
which doesn't seem to be until all iframe advertisements are loaded
(which is beyond my control).

Any idea how I might accelerate initialization given these
constraints? Are iframes which load external domains part of the
DOM? Can I shortcut it somehow? I can't document.write / innerHTML
these iframes in after the main DOM loads because they have build in
scripts that go haywire when document writes are performed. (Sorry if
this is borderline no longer a fancybox question...)

see:
http://www.gamemazing.com/v5

Thanks!
Bryce

JFK

unread,

Mar 7, 2012, 7:46:51 PM3/7/12

to fancybox

@Bryce

In a normal scenario, fancybox has to wait for the document to be
ready (.ready() method)

the only way I can see to make it work the way you want it is to fire
fancybox as a function onclick. As any other function, you may need to
pass the parameters (at least the URL) so your link
<a class="fancybox" href="include/boxes/doLogin.php">Log in</a>

should look like now:
<a href="javascript:;" onclick="fancyboxMe('include/boxes/
doLogin.php')">Login</a>
- or with an absolute path whatever it works better
<a href="javascript:;" onclick="fancyboxMe('http://www.gamemazing.com/
v5/include/boxes/doLogin.php')">Login</a>

notice that you call the function wheather the document is ready or
not and pass the url to it

so the script:
<script type="text/javascript">
function fancyboxMe(url) {
$.fancybox({
// your fancybox options here
'href' : url,
});
}
</script>

notice that I passed the url as parameter and set the option 'href' to
fancybox so it will know what to open.
In this way you can fire fancybox before the document is ready

Bryce

unread,

Mar 11, 2012, 3:38:40 PM3/11/12

to fancybox

@JFK

Thanks for sharing this method, I really appreciate you working
through this.

Unfortunately, I haven't had much luck implementing it yet, but that
is likely my own fault. I'll keep at it, but for now I settled on
hiding the links until .ready() fires off. I'll post back after I
have some time to experiment...

Thanks!
Bryce

Sven

unread,

Sep 1, 2012, 8:39:49 AM9/1/12

to fanc...@googlegroups.com

Any luck fixing this?

JFK

unread,

Sep 1, 2012, 8:25:27 PM9/1/12

to fanc...@googlegroups.com

did you see my answer?

Reply all

Reply to author

Forward