WXforum.net

Web Weather => Weather Web Site Help => Topic started by: Dal on June 22, 2010, 01:17:41 PM

Title: 'Jumping' Graphics
Post by: Dal on June 22, 2010, 01:17:41 PM
I have an annoyance with the web site. The Cloud height graphic frequently, along with (sometimes) the windrose graphic, 'jumps' when it reloads. I've noticed this behaviour on some other sites and yet not on other sites. It doesn't happen every single time but often enough to be a real annoyance.
Does anyone know a) why this is happening and b) how to prevent it?
http://www.sanctuaryweather.co.nz

Very many thanks for any forthcoming help with this.
Title: Re: 'Jumping' Graphics
Post by: BigOkie on June 22, 2010, 01:42:32 PM
I have an annoyance with the web site. The Cloud height graphic frequently, along with (sometimes) the windrose graphic, 'jumps' when it reloads. I've noticed this behaviour on some other sites and yet not on other sites. It doesn't happen every single time but often enough to be a real annoyance.
Does anyone know a) why this is happening and b) how to prevent it?
http://www.sanctuaryweather.co.nz

Very many thanks for any forthcoming help with this.

Likely, it "jumps" due to the real-time nature of updates being used by the ajax templates.  These are typically sites using the Saratoga php ajax templates and have the ability to update as often as every 3 seconds.
Title: Re: 'Jumping' Graphics
Post by: Dal on June 22, 2010, 11:31:20 PM
Likely, it "jumps" due to the real-time nature of updates being used by the ajax templates.  These are typically sites using the Saratoga php ajax templates and have the ability to update as often as every 3 seconds.

That was my original thought and that sent me looking at other sites which use the Saratoga-based templates. Approximately 50% of them have the same problem, while the other 50% don't.
Title: Re: 'Jumping' Graphics
Post by: 4wd on June 23, 2010, 05:09:39 AM
I'm not seeing it here, it's probably related to how quickly the server or your own connection can deliver the image files.
It would be made worse by adjusting the image sizes by using html to make them fit a page layout.
Haven't checked but assume your template does not do this.

When I see a live weather page flicker and jump I just assume it's updating to the latest data so 'a good thing' - so long as it doesn't hang while loading.
Title: Re: 'Jumping' Graphics
Post by: Dal on June 23, 2010, 12:21:20 PM
I'm not seeing it here, it's probably related to how quickly the server or your own connection can deliver the image files.

Well, that was my other thought..... that it's the server delivery causing it. That could explain why some sites have the proble (if it can be called that) and yet others don't. And no, I'm not using html to resize.
Title: Re: 'Jumping' Graphics
Post by: saratogaWX on June 23, 2010, 02:19:33 PM
The 'jumping' can be caused by JavaScript (AJAX updates) replacing an image without a 'placeholder' to keep the height of the image stable in the browser.  In the dashboard (for example) there's a 1px x 58px high invisible gif (spacer.gif) to prevent collapse of the page while the image is being updated by the JavaScript.  It would be helpful to cite websites that show the jumping issue and ones that don't (by URL) .. then further investigation of the cause is possible :)
Title: Re: 'Jumping' Graphics
Post by: Dal on June 23, 2010, 11:27:57 PM
  It would be helpful to cite websites that show the jumping issue and ones that don't (by URL) .. then further investigation of the cause is possible :)

Apart from my own of course, here's one that does: http://www.tokoroaweatherlive.net/
Here's one that doesn't: http://www.hebwx.co.uk/

Occasionally one needs to wait to see it happen as it doesn't happen on every single reload. Sometimes, for example, you can wait a couple of minutes before it hapens, other times it'll happen a number of times in a row straight off.
Title: Re: 'Jumping' Graphics
Post by: saratogaWX on June 24, 2010, 12:43:55 AM
Using http://validator.w3.org/ on your site shows 55 HTML errors, so some of the behavior you're seeing may be due to the browser trying to do the formatting with some issues in the underlying HTML.

www.tokoroaweatherlive.net has no HTML errors cited (but you say still shows the jumping).

www.hebwx.co.uk has 17 HTML errors cited, but doesn't show the jumping.

All three sites use the alternate ajax-dashboard (which besides the basic template) seems the only commonality.

Scott's http://www.websterweatherlive.com/ site also as the alt dashboard, validates fine, and seems to have no jumping problem.

Somehow, on the sites that 'jump', the browser seems to think it has to recalculate the margins/paddings/positions of the elements due to the JavaScript update of the HTML (which should be the same HTML, just different text content).

I'd suggest first fixing the HTML errors so the page validates ok, see if the problem remains, then we can explore deeper...

Best regards,
Ken

Title: Re: 'Jumping' Graphics
Post by: Dal on June 24, 2010, 03:13:11 AM

I'd suggest first fixing the HTML errors so the page validates ok, see if the problem remains, then we can explore deeper...

When I first decided to try to get to the bottom of it, I threw up a test site (no longer there now), using just the basic Ajax PHP pages downloaded from your site, Ken. I made no changes whatsoever to it. The default windrose graphic was still jumping.
Title: Re: 'Jumping' Graphics
Post by: Weather Display on June 24, 2010, 03:18:36 AM
I must say I do like this web site
http://www.tokoroaweatherlive.net/index.php
especially the wind direction graphic
well done to that person /persions behind that :)
Title: Re: 'Jumping' Graphics
Post by: saratogaWX on June 24, 2010, 11:35:04 AM

I'd suggest first fixing the HTML errors so the page validates ok, see if the problem remains, then we can explore deeper...

When I first decided to try to get to the bottom of it, I threw up a test site (no longer there now), using just the basic Ajax PHP pages downloaded from your site, Ken. I made no changes whatsoever to it. The default windrose graphic was still jumping.

That's odd.. I see no 'jumping' with the default template site(s) using FF 3.6.4 .. which browser are you using?

Best regards.
Lem
Title: Re: 'Jumping' Graphics
Post by: Dal on June 24, 2010, 12:21:59 PM
Same browser: FF 3.6.4 With the default site, the 'jumping' is far less noticeable but is still there. Once the Webster dashboard is added with the cloud height graphic, it becomes far more noticeable. If I get a chance today, I'll throw up the test site again.
Title: Re: 'Jumping' Graphics
Post by: DaculaWeather on June 24, 2010, 12:33:32 PM
I must say I do like this web site
http://www.tokoroaweatherlive.net/index.php
especially the wind direction graphic
well done to that person /persions behind that :)
I noticed the wind rose graphic jumps on that one too. I went back and looked at mine and it doesn't jump at all.
Title: Re: 'Jumping' Graphics
Post by: Dal on June 24, 2010, 02:00:56 PM
I noticed the wind rose graphic jumps on that one too.

Yep. So it doesn't appear to be caused by html errors because Ken says there aren't any on that site, or at least that particular page. In fact, I've just validated http://www.tokoroaweatherlive.net/index.php myself and it has definitely passed. So html errors aren't causing it.
Title: Re: 'Jumping' Graphics
Post by: Dal on June 24, 2010, 02:05:57 PM
Ok, I've thrown up the basic site at http://test.sanctuaryweather.co.nz. Apart from the thermometer graphic, it's completely original. I've tested it with http://validator.w3.org/ and it's passed. Yet the wind graphic definitely shows jumping.
Title: Re: 'Jumping' Graphics
Post by: DaculaWeather on June 24, 2010, 02:12:14 PM
Go to www.pingdom.com and click on "Tools" on the top navigation bar. Run the load test and see what kind of numbers you get back.
Title: Re: 'Jumping' Graphics
Post by: Dal on June 24, 2010, 04:03:40 PM
Go to www.pingdom.com and click on "Tools" on the top navigation bar. Run the load test and see what kind of numbers you get back.

For the main site: Total loading time = 8.9 seconds
Test site = 4.7 seconds
Title: Re: 'Jumping' Graphics
Post by: saratogaWX on June 24, 2010, 04:49:08 PM
Ok, I've thrown up the basic site at http://test.sanctuaryweather.co.nz. Apart from the thermometer graphic, it's completely original. I've tested it with http://validator.w3.org/ and it's passed. Yet the wind graphic definitely shows jumping.
Hmmm... I don't see what I'd term as 'jumping' (i.e. moving up the page/tables compressing), but I do see the flash as the graphic refreshes in place (both conditions icon and wind-rose until they are loaded into the browser cache).  Is the latter the 'jumping' to which you are referring?

Best regards,
Ken
Title: Re: 'Jumping' Graphics
Post by: Dal on June 24, 2010, 04:57:03 PM

Hmmm... I don't see what I'd term as 'jumping' (i.e. moving up the page/tables compressing), but I do see the flash as the graphic refreshes in place (both conditions icon and wind-rose until they are loaded into the browser cache).  Is the latter the 'jumping' to which you are referring?

Best regards,
Ken

'Jumping' is my term for it. There's a definite time period, when the graphic is reloading, that shows a blank space before the graphic becomes present again. This is apparent on only some sites, while on others the transition appears seamless. e.g. Martin's site at http://www.hebwx.co.uk doesn't seem to exhibit that characteristic at all (at least not that I've seen), likewise with a number of other sites I've looked at. Yet with some other sites it's quite pronounced.
In some ways it's no big deal, apart from being a slight annoyance. Just bothers me a bit is all :)
Title: Re: 'Jumping' Graphics
Post by: saratogaWX on June 24, 2010, 06:01:27 PM
Ahhh... it's a 'refresh flash' (blank graphic space before graphic reloads) that's the problem.

It may be caused by
Code: [Select]
<meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache" />
in top.php which is used to ensure that content is always 'fresh'.  Some browsers will refuse to update (even if the image changes) without having that directive.  The time-lag for the refresh certainly depends on the website-to-browser response time for the graphic reload to take place.  The AJAX script has a built-in check in the set_ajax_obs() function to NOT change the HTML (not reload a graphic) if no change is made since the last time (stored in the <span> tag pseudo-attribute of lastobs="" .. you can see them in FF WebDeveloper by doing a 'Show Generated Source' request).

I see that the cloud height graphic seems to refresh each time with the alt-ajax-dashboard config .. not sure why that is.  If the height and condition hasn't changed, it should remain the same ?!?
Ahhh.. the cloud graphic includes a buster=..... who's value changes each time, so a fresh graphic is computed, and a new image is fetched.

Best regards,
Ken

Title: Re: 'Jumping' Graphics
Post by: Dal on June 24, 2010, 06:20:24 PM
That would explain that, then :) So.... not anything that can be done about it, Ken?
Title: Re: 'Jumping' Graphics
Post by: saratogaWX on June 25, 2010, 01:27:45 AM
To get the cloud height graphic to refresh less frequently is possible, but may sacrifice what it's presenting (current conditions+cloud height+wind speed) if refreshed less frequently.

I'll take a look at the code and see what might be done to refresh less and still preserve the fidelity of what the image presents.

Best regards,
Ken
Title: Re: 'Jumping' Graphics
Post by: Cienega32 on June 25, 2010, 04:13:45 AM
I must say I do like this web site
http://www.tokoroaweatherlive.net/index.php
especially the wind direction graphic
well done to that person /persions behind that :)

Are you talking about the "current" Wind Rose (a nice TNET Weather creation) or the "24 hr Trend" graphic?

The Trend graphic is very cool! Nice & clean.
Title: Re: 'Jumping' Graphics
Post by: saratogaWX on June 25, 2010, 03:51:06 PM
That would explain that, then :) So.... not anything that can be done about it, Ken?

Well, I've taken a look and experimented with Ranier's great cloud-height.php script and regarding the 'jumping' as it refreshes most every time, there's not much that can be done except to remove the <span class="ajax" id="ajaxcloudheightimg">...</span> from around the invocation of the script (in other words, don't AJAX refresh it).
The AJAX and the image use wind direction/speed to determine if a new image is needed, so in variable winds, you can get a refresh each time the AJAX kicks in.  So...
Just use the dashboard to load a static image (created at the time the page is reloaded by the browser), and your display won't 'jump'.  The downside (of course) is that unless you force a reload of the page every 5 minutes or so, the image can become 'out of sync' with the current conditions -- I think this is a small price to pay for getting a stable display :)

BTW, the wind-rose doesn't normally 'jump' because it is a set of 16 static images that the browser can cache, and the thermometer only updates when  there is a 1 degree change to the current (or high/low).

Hope this helps...
Best regards,
Ken
Title: Re: 'Jumping' Graphics
Post by: Dal on June 25, 2010, 03:59:26 PM
I use a METAR for the cloud height and that updates only every hour, or thereabouts. Perhaps forcing a page refresh of maybe 15 - 30 minutes would suffice? The windrose and the thermometer should be unaffected.
Title: Re: 'Jumping' Graphics
Post by: Dal on June 25, 2010, 04:02:48 PM

BTW, the wind-rose doesn't normally 'jump' because it is a set of 16 static images that the browser can cache

Unless, like me, you have the browser set not to cache :)