I have a page that is working, but my client is really bothered by the fact that the page shows unrendered code before the data is loaded. This happens for about a 1/2 second or less, but it's very noticeable. I've tested it and found that this a real problem with google chrome users. IE and Firefox don't seem to have the same problem.

For a split second, before the data loads (in google Chrome), myself and several employees of my customer all see this:


After a quick flash of this, the data loads, but this doesn't look good at all. We can't just tell people not to use the best browser around, so how can this be resolved?? This is the live page with this issue - and again... it only seems to be with google chrome.
www.hmgstrategy.com/rc/video-grid.asp

I've tried using the show-hide behavior with the data source but that didn't make one bit of difference. Any suggestions?

There is this brief display of code before the page is rendered on just about every single page I've produced with HTML5 Data Bindings. I have a feeling I'm going to have to entirely redo the video section of this site because of this problem. As we're testing through this section of the site, the customer thinks this "quick flash" display is unacceptable, and I do too. It might only be on one browser, but it's one of the most important ones...

I really do not want to redo the whole thing in older code, so I hope DMXzone has something constructive to offer.

Hello Steve,
You can just add a preloader to your pages, and hide it when the data is loaded. In your case your preloader could be a fixed-position div with 100% width/height some background color and animated gif as a background image.

Is a pre-loader different than using the show-hide through the behavior connector with the data source? Because I followed your instructions on using the show-hide method from another thread and that didn't help at all.

Do you have a tutorial for what you are describing?

1. You add a div: <div id="preloader"></div> just after the opening body tag.
2. You style this div:

#preloader {display: block; position:fixed; left:0; right:0; top:0; bottom:0; background:url(path/to/img.gif) no-repeat center #fff; z-index:9999;}

3. Open your Data Bindings behaviors and select:
- Behavior: change property
- Event: update - when data is successfully loaded or updated
- Select DIV with id preloader
- Property - display
- New value - none
OK


OR you can call the change property behavior with the behaviors available in extended repeater for the selected repeat region.
That is all.

Edit: Even emulating really slow internet connection on the link you provided i cannot see any not-rendered data while the page is loading (tested in Firefox and Chrome)

Wow, that's fantastic! Thank you so much Teodor! I will give it a try. :-)

After months of experiencing similar issues which drove me mad I figured out what causes this lag/load delay. Covering it up with a pre-loader is not really a solution and adds time to development when you have possibly hundreds of pages and data sources being called.

The problem happens when Java script is placed outside of the Head area.

Simply relocate Java script to the Head area and the delayed display/render of the data source disappears and your pages will load as you expect them to (without displaying the source).



ALWAYS backup your pages before making changes!!

I wish it had been that simple. My javascripts have always been in the header. The problem only occurred in google chrome and only appeared for a about a half or quarter second if the preloader is not in use. The preloader worked great for me and satisfied my client. The pages are fast.

Sorry it did not help Steve. I am also running Chrome on a Windows 8 64 box. Maybe I am lucky here as every page I have modified has resolved the issue I was experiencing.

Best regards.

So I ran across your thread while trying to troubleshoot another issue

www.dmxzone.com/support/18424/topic/58752/?page=2

I bet this is what is happening to me. In my case, I am loading data into an instance of the HTML Editor 3. Frequently, it displays as blank - no content loads at all. I bet your issue explains this. The editor is not waiting for the data to load.

Does anybody from Dmxzone read these threads? Is anybody getting support lately?

I can't help you with the technical problem you are having but I can pass along one tidbit that might help you get better support from dmxzone.

It's a huge pain in the ass, but I've had very good luck getting support when I prepare a test page that they can see and test themselves when reporting a problem with one of their extensions. Most times, they will ask for that anyway, so try and give them everything they could want to make a diagnosis right off the bat. That has worked pretty well for me in the past, although it's a huge inconvenience because many of the pages they want to see are protected by site admin credentials so I have to create secondary versions that I can show to them.

Hi Matt,
I have always had a prompt response to my support issues and can't fault the DMX team.

Since having similar issues and playing around with Javascript I now add a simple animation via HTML 5 Animate CSS to the data source. Looks nice and no more delay. Also have a slight fade in effect on page load.

All together works really well.