[Pro] Flashing whole browser page on first load

This site is a complete rebuild from an earlier GoLive one that worked well. The live replacement Freeway 6.1.0 is working reasonably well, but has a flashing white ‘whole browser’ page on first load to Home Page and does not settle down until about 3 pages in. The pages have a large background images (tried gif and jpg) which is causing the problem I am sure, but I don’t know why.

The flashing experience is not good for a first time user and will certainly put them off the site, something I wish to remedy.

www.artdesign.me.uk


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On my iPad just now so cant investigate te flash - however Typo Alert

Public Art :black_small_square: murals & mosacics

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

David, Thanks for that typo error notice, it is now correct. I have been having several issues with this site which surprises me as previous ones have gone smoothly. The flashing white ‘whole browser’ page is still a big issue and any light shed on remedying it would be appreciated. Nick


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

My guess would be the background color on the body element is slightly
delayed by all the javascript that is loaded in the page head and called on
the page-load. Smarter people than me may disagree.

www.artdesign.me.uk


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Where in Freeway can I access the page head,


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

There’s two ways that you can get there. One would be the Page / HTML Markup dialog, in either the After or Before sections. The other would be through an Action. If you have applied Actions to your page that create the animated background, then that’s where the extra code and resources are coming from that are being written into your page.

Overall, you can read (but not write to) the HTML that Freeway generates by setting a programmer’s text editor as one of your browsers through the File / Preview in Browser / Browser Setup dialog. Use TextMate, TextWrangler, BBEdit, Sublime Text (anything, in other words) that will give you a proper color-coded view of the source). Then you can use File / Preview in Browser / [your editor here] directly from Freeway, and see the code that Freeway has written.

Understand that this is a one-way thing – Freeway generates HTML and CSS and JavaScript, but it does not read or understand it at all, and what you see in the Freeway design view is the precursor to the generated code, not a rendered view of the code itself. Freeway’s internal Preview mode, however, is a browser – specifically, a WebKit browser like Safari or (formerly) Chrome.

When Freeway publishes a page from its internal design model, it pauses at specific places in the output process and allows raw hand-coded bits to be added into the output stream. In an Action, these take the form of callback functions. In the design interface, they take the form of Page / HTML Markup or Insert / Markup Item placeholders. Anything you add through these is injected into the final page code, but never interpreted by Freeway. Changes you make here have to stand alone.

Walter

On Nov 7, 2013, at 11:20 AM, Nicholas Robertson wrote:

Where in Freeway can I access the page head,


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Walter - Thanks for the explanation.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Walter - just looked into the Page / HTML Markup dialog and its completely empty in. The drop down shows After or Before plus other sections., am I missing something. Nick


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

No, you are using Actions, which can also include code into the head of your page. Just because you don’t see it in the Page / HTML Markup doesn’t mean that it isn’t being added. Remember, Freeway doesn’t read HTML, and a Freeway document doesn’t contain any HTML. The only moment when HTML exists is during the publish process, while the HTML is generated and written out to the exported files.

Walter

On Nov 7, 2013, at 12:10 PM, Nicholas Robertson wrote:

Walter - just looked into the Page / HTML Markup dialog and its completely empty in. The drop down shows After or Before plus other sections., am I missing something. Nick


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Preview your page into a text editor, you will see the final output there. To alter the code that the Action is adding, you will need to either edit the Action itself, or you will need to change the parameters in the Action interface. (You know the old joke: Garbage in, garbage out.) If you have specified images for the background that are too large (file-size-wise) then you can edit those images to make them smaller. Remember, you can get away with 10-20% quality in a JPEG if you are using it in the background. You don’t want it to be sharp and crisp, because that takes away attention from the foreground elements.

Walter

On Nov 7, 2013, at 12:15 PM, Walter Lee Davis wrote:

No, you are using Actions, which can also include code into the head of your page. Just because you don’t see it in the Page / HTML Markup doesn’t mean that it isn’t being added. Remember, Freeway doesn’t read HTML, and a Freeway document doesn’t contain any HTML. The only moment when HTML exists is during the publish process, while the HTML is generated and written out to the exported files.

Walter

On Nov 7, 2013, at 12:10 PM, Nicholas Robertson wrote:

Walter - just looked into the Page / HTML Markup dialog and its completely empty in. The drop down shows After or Before plus other sections., am I missing something. Nick


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I do not understand the term ‘Preview your page into a text editor’ do you mean in a browser and Show Page Source?

The background images are the same as the page size (minus a buffer at the top) 960x630px so should be a nice tight fit. They are about 85k and I am working to reduce them to about 60k, but that is hardly a large size to explain this flashing white ‘whole browser’ issue. As I said earlier I had no problem with loading on this site when it was built on GoLive. Nick


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Walter is so much smarter at this than I am, but I am saying that if you
(1) look at the page source, however you choose to do that, you will see an
enormous javascript in the page head. (2) if you check the body element
tag, you will see this humungo javascript is called on the page load – so
about the time the browser is trying to stuff its face with styles and
elements to draw the page. My contention is that this is delaying the
loading of the style elements long enough for human beings to see it as a
“flicker”.

I’m not sure what the solution is, because I’m not smart enough. I would
start by making a duplicate of one of the pages and undoing whatever
actions are putting that javascript into the head with the body onload
trigger and see if that does help. then it’s a matter of finding a
different way to do that thing where the javascript and trigger can happen
AFTER the styles and html are loaded. But that’s just me.

Best luck,


Ernie Simpson

On Thu, Nov 7, 2013 at 12:34 PM, Nicholas Robertson email@hiddenwrote:

I do not understand the term ‘Preview your page into a text editor’ do you
mean in a browser and Show Page Source?

The background images are the same as the page size (minus a buffer at the
top) 960x630px so should be a nice tight fit. They are about 85k and I am
working to reduce them to about 60k, but that is hardly a large size to
explain this flashing white ‘whole browser’ issue. As I said earlier I had
no problem with loading on this site when it was built on GoLive. Nick


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’m sorry, I thought you had been reading along. I posted instructions earlier in this thread as to how to specify a text editor as a browser within Freeway. It’s a simple one-time setup thing, and then you will be able to inspect your work in a much nicer environment than a browser’s view source mode.

As to the JavaScript, the only script I see in the page is added by ImageGuardian. Please try publishing this page without it, and see if the flashing goes away. (I see it here as well, but I am hard-pressed to explain it – there’s nothing about this page that is doing any sort of periodical change to the DOM.)

Walter

On Nov 7, 2013, at 12:34 PM, Nicholas Robertson wrote:

I do not understand the term ‘Preview your page into a text editor’ do you mean in a browser and Show Page Source?

The background images are the same as the page size (minus a buffer at the top) 960x630px so should be a nice tight fit. They are about 85k and I am working to reduce them to about 60k, but that is hardly a large size to explain this flashing white ‘whole browser’ issue. As I said earlier I had no problem with loading on this site when it was built on GoLive. Nick


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

In future I will make sure I read all the thread instead of just looking at the email notice I get. I have to move onto some Mailchimp e.newsletter ‘client needs it now’ work now so I will have to digest this later. Please watch this space. Nick


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ernie – thanks for the kind words. I only see a really quite svelte references to ImageGuardian, and I can’t see anything in that script which would be causing any sort of delay on page load. All it does is walk the DOM and decorate any image marked with the classname ‘ig’. I’ve seen (and written) much portlier scripts.

Walter

On Nov 7, 2013, at 12:44 PM, Ernie Simpson wrote:

Walter is so much smarter at this than I am, but I am saying that if you
(1) look at the page source, however you choose to do that, you will see an
enormous javascript in the page head.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If I look at the site through Safari’s Web Inspector and enable script debugging the page stops when it first loads and then runs Prototype. The entire page is completely white while this happens and although it happens in a split second it would seem it is enough to cause the pages to flash before the content is loaded. It looks like the code is gathering information about the browser environment which would make sense.

I just tried moving loading the Prototype and Scriptaculous libraries to the foot of the page (just before the end of the body) and this time the majority of the page content (the page colour, and text) loaded before the scripts kicked in.

Walter, what is the best way to defer the loading and execution of these scripts? I tried adding the defer attribute on the tags but that just ensures they load after the script that need them start running.

On 6 Nov 2013, at 17:17, Nicholas Robertson wrote:

The flashing experience is not good for a first time user and will certainly put them off the site, something I wish to remedy.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Can you post an example page somewhere? I no longer see the code in the OP’s page on line.

Generally, if you want to run code at page load, it’s best to wrap it in a deferred observer:

document.observe('dom:loaded', function(){
	//your code here
});

Or in jQuery:

$.ready(){
	//your code here
});

I can’t recall what if anything Prototype was doing in the original page, but if you were using it in Image Guardian (and it didn’t look that way to me), then you could rewrite your basic loop like this:

var image_guardian = function(){
	// add your various tricks here
};
document.on('mouseover', '.ig', image_guardian);
document.on('click'. '.ig', image_guardian);
document.on('contextmenu', '.ig', image_guardian);

Walter

On Nov 7, 2013, at 4:18 PM, Tim Plumb wrote:

If I look at the site through Safari’s Web Inspector and enable script debugging the page stops when it first loads and then runs Prototype. The entire page is completely white while this happens and although it happens in a split second it would seem it is enough to cause the pages to flash before the content is loaded. It looks like the code is gathering information about the browser environment which would make sense.

I just tried moving loading the Prototype and Scriptaculous libraries to the foot of the page (just before the end of the body) and this time the majority of the page content (the page colour, and text) loaded before the scripts kicked in.

Walter, what is the best way to defer the loading and execution of these scripts? I tried adding the defer attribute on the tags but that just ensures they load after the script that need them start running.

On 6 Nov 2013, at 17:17, Nicholas Robertson wrote:

The flashing experience is not good for a first time user and will certainly put them off the site, something I wish to remedy.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Walter,
Here’s a copy of one of the pages from the site;
http://artdesign.timplumb.com/nickrobertson6.html

You’ll find the Prototype and Scriptaculous early on in the page head. Here’s a version I was playing with where I’ve moved the scripts to the end of the body which appears to fix the ‘white page or pause-ness’ while they load;
http://artdesign.timplumb.com/nickrobertson6-tp.html
That almost certainly isn’t ‘the way’ to do it but what is?

No, these aren’t anything to do with Image Guardian. I try and keep things vanilla JS where ever I can as you never can tell who you are sharing a page with! :slight_smile:
It looks like these libraries are there to power the Sequence Timer (FWShowHideLayerFade function).
Regards,
Tim.

On 7 Nov 2013, at 21:57, Walter Lee Davis wrote:

Can you post an example page somewhere? I no longer see the code in the OP’s page on line.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

As a visual designer I chose Freeway to replace my ageing GoLive software, so the code talk is going over my head a bit. However, I am really keen to sort the problem, so I am grateful for the contributions to this thread.
Today I have uploaded an updated version of this site with new lighter background images. However, the flashing white ‘whole browser’ page problem is still there. Nick.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I spent some time last night with the cached copy of this page that Tim sent to me, and I am baffled as to why it may be behaving in this manner. I can’t really lay the blame at Prototype’s feet. I experimented with disabling the sequence timer, then the fwPreload function that sets up the rollovers. I reloaded over and over with and without caches, and with and without Prototype in the page head. I can’t find a magic bullet that gets the page to load its base color layer quickly enough to avoid the flash. I even unlinked ImageGuardian without any noticeable difference.

Now if I disable JavaScript in the browser preferences, the page does load immediately – there’s no flash. This leads me to think that something (and again, it’s not Prototype per se) in that realm is to blame. But without going through all the Action-generated inline scripts and removing them, I’m hard-pressed to say what you could do in this case.

Walter

On Nov 8, 2013, at 7:03 AM, Nicholas Robertson wrote:

As a visual designer I chose Freeway to replace my ageing GoLive software, so the code talk is going over my head a bit. However, I am really keen to sort the problem, so I am grateful for the contributions to this thread.
Today I have uploaded an updated version of this site with new lighter background images. However, the flashing white ‘whole browser’ page problem is still there. Nick.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
List Options | FreewayTalk


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options