External link preventing loading of page

[qim]

Hi

I have a currency widget in my pages that loads pretty fast. However, sometimes it takes forever to load and eventually the page gives up and load without it. Thta part is fine; the problem is that meanwhile some 15 seconds went by with only part of the left sidebar (where the widget resides) visible.

Obviously, as the page loads there is a request to the widget’s external site, and if this is down for some reason (updating?) my pages uffer.

Is there a way of telling the page not to connect to that site UNLESS the visitor actually starts to use the widget?

<!-- Currency Converter script - fx-rate.net -->
<div style="width:160px; background-color:#FFFFDB;border:2px solid #888;text-align:center;margin:0px;padding:0px">
<div style="background-color:#CD853F;border-bottom:1px solid #888;width:100%;margin:0px;padding:0px;text-align:center;"><a class="Vlabel" style="font-size:12px!important; line-height:16px!important;font-family: arial;text-decoration:none;color:#132105;margin-bottom:6px;"><b>Currency Calculator</b></a></div>
<script type="text/javascript" src="http://www.fx-rate.net/converter.php?layout=vertical&amp;amount=&amp;tcolor=132105&amp;default_pair=DOP/GBP"> </script></div>
<!-- End of Currency Converter script --></div>

Here is a waterfall from FF Web Console showing this problem a few minutes ago.

Thanks

[megazoid]

@qim

UNLESS the visitor actually starts to use the widget?

How does user start to use the widget?
Does he need to click somewhere to make widget appear?

If it’s possible to detect the fact that user wants the widget “now”, then it’s possible to load external script dynamically on demand.

[qim]

@megazoid

Does he need to click somewhere to make widget appear?

No, the widget must be visible, otherwise the visitor does not know that it exists.

@megazoid

If it’s possible to detect the fact that user wants the widget “now”, then it’s possible to load external script dynamically on demand.

How do you do that?

What I need is for the widget to connect to the external server, ONLY when the visitor does something to it: enter a value, change pair of currencies, or even if necessary when he clicks anywhere on it.

[megazoid]

The problem here is that widget cannot be visible before it was loaded.
As you can see, widget code that you insert on your page doesn’t have any inputs.
Widget interface is built dynamically by its script.
So, that means you have to load script to display widget.

[megazoid]

I came up with a trick that may help to solve this issue.

The main idea consists of two steps:

1. Instead of widget code, insert screenshot (picture) of the widget into page;
2. When visitor clicks on the screenshot (assuming this is a real widget) load real widget dynamically

Check the sample here: http://jsfiddle.net/fk660ubg/

[felgall]

@megazoid

I came up with a trick that may help to solve this issue.

Nice trick.

An alternative solution would be to simply dynamically load the widget after the rest of the page is loaded so that it will be available as soon as possible but without delaying the loading of the rest of the page.

[megazoid]

@felgall

to simply dynamically load the widget after the rest of the page

Yeah, that is a solution too although not so simple, as that widget uses document.write to build an interface. So if you insert it at the bottom of page you’ll have to catch the output somehow and place it in the correct position on the page

[qim]

@megazoid

1. Instead of widget code, insert screenshot (picture) of the widget into page;2) When visitor clicks on the screenshot (assuming this is a real widget) load real widget dynamically

Brilliant! Even I can do that!

@felgall

An alternative solution would be to simply dynamically load the widget after the rest of the page is loaded so that it will be available as soon as possible but without delaying the loading of the rest of the page.

How could I do that, in 2 easy lessons?

[megazoid]

@qim

How could I do that, in 2 easy lessons?

In the place where you want to display widget remove its script tag and put a container instead:

<div id="currency-widget"></div>

At the very bottom of the page (before closing body tag) insert this:

<script>var cache = ''; document.write = function(html) { cache += html; }</script>
<script type="text/javascript" src="http://www.fx-rate.net/converter.php?layout=vertical&amp;amount=&amp;tcolor=132105&amp;default_pair=DOP/GBP"></script>
<script>document.getElementById('currency-widget').innerHTML = cache;</script>

I haven’t tested this, but it should work

[qim]

@megazoid

How could I do that, in 2 easy lessons?

Where is number 2?

Just kidding…

Many thanks. I 'll give both solutions a try.

[megazoid]

@qim

Where is number 2?

Never take drugs. Let it be the second one

[qim]

Hi megazoid

Finally got round to try the various ideas and started with yours. I am confused!

First, I am getting a totally different widget (that I also have and is on the published page), which is strange because as far as I can see that widget is not mentioned in this test page

http://pintotours.net/TEST/StoDomingo.php
Second, it does not seem to work, which is probably to be expected if I have the wrong widget in place

The widget should look like in this page
http://pintotours.net/Asia/Indonesia/bali.php

EDIT

My apoligies! yes, it seems to be working albeit with the wrong widget layout.

Obviously, the new stylesheet is forcing the new design

But, when does the data load? When the page opens, or when the widget is used?

NEW EDIT

Well, I tried FF web Console/Network and I see no sign of this script.

Does that answer my own question?

But when I try the widget the Console still does not mention this script. What is going on?

[megazoid]

@qim

wrong widget layout

Your test page doesn’t have bali.css included
That file has styles for #converter

[qim]

Hi megazoid

That’s what I meant. The new pages all share the same new css, and now have the new (different) widget.

The bali.css exists only for the bali.html and has the widget you coded for.

I understand what is happening now, but need code for the new widget like in the http://pintotours.net/Americas/DomRepublic/StoDomingo.php the one to put at the bottom of the page.

. Could you help me there?

But my other question is to understand the loading as seen through FF Web Console… is it being loaded, or not?

EDIT

I’ve just tried the Web Console on the Barcelona page, that is live and there also the widget does not show up as being losded. Could it be that it is only loaded wheb the user enters something in it? In which case my problem may not be real?

What does hold things up there is the loading of the converter1.php…

[Mittineague]

@qim

is it being loaded, or not?

On the left are the HTTP response codes.
That line has 522
That is “Timed Out”, so no.

List of HTTP status codes

[qim]

Hi Mittineague

Does that mean that it is doing as planned, or something failing?

Please, have a look at mt edits above.

In the Barcelona page which is live I found that the culprit is not the script, anyway, but the php file.

How can I get round that?

EDIT

Which page are you looking at?

In the TEST page there are only 200, 300 and 400 codes

[Mittineague]

@qim

Which page are you looking at?

Ah, sorry. I was looking at the GET converter.php line in post #1’s screenshot.
I didn’t catch that you are now talking about converter1 .php

[qim]

Hi

I can’t quite understand these colors and lines. A little lesson, please!

Do I take it from these 2 lines that the converter1.php only comesd into being AFTER the whole of the Punta.pho has downloaded?

And I take it that pink is requesting, brown is waiting and blue downloading

is that it?

[Mittineague]

@qim

understand these colors

Connecting, Waiting Receiving
https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Timings

[qim]

what about the first part of my post?

and how come I have no green? beacuse it is internal file?