1

My webpage webpage link uses 3 javascripts. A TabSlideOut script, a SmoothDivScroll script and the TN3 Image Gallery script.

When the page is loaded for the first time or reloaded the script for the TN3 Image Gallery is running for a while because many images have to be loaded and this takes time.

During this time the script for the SmoothDivScroll waits and only executes when the script for the TN3 Image Gallery is finished. Because of that the page looks very ugly during this time because the images of the SmoothDivScroll script are shown one after each other instead scrolling smoothly as they do when the SmoothDivScroll script is executed. You can see this when you reload the page.

What I would like to achieve is that the script for the SmoothDivScroll is executed first and only then the script for the TN3 Image Gallery should be executed. Or anything else that could stop the webpage from looking ugly when it is reloaded.

I am not a very experianced web implementer and I don't have javascript programming knowledge. I tried for two days to find a solution but I struggled. I hope that somebody can help to solve my problem. Thanks

Aravin
  • 4,126
  • 1
  • 23
  • 39
afrikapit
  • 29
  • 1
  • 9
  • Change the order you load the scripts in. But if they depend on each other, then that might not work. The other work around is to hide the elements (with css) until your scripts have all done their work and then make them visible again (with Javascript). The downside to that is that if somebody doesn't have Javascript enabled, they'll be staring at a blank page. – Matt Burland Jan 30 '14 at 13:35
  • Actually as you can see from the html code the order is that the SmoothDivScroll script starts before the TN3 Image Gallery script but even so the SmoothDivScroll script does not finish before the TN3 Image Gallery script finished. I was hoping that there is a way to define in which order the scripts will start loading or that one can define that script "B" only starts running if script "A" is finished. – afrikapit Jan 30 '14 at 15:12

2 Answers2

2

I'm going to call this a FOUC problem; e.g., a "Flash of Unstyled Content." Very common. Been around since the late 1900's, and Safari is notorious for this.

Short Answer: Initially set visibility:hidden on your elements with an inline style. Then use JavaScript to set visibility:visible after they've loaded.

Generally, the solution is to hide content until the content is loaded, and then display it when it's ready. Often while content is loading, you will display a spinner of some kind.

Technically, there are many ways to do this. You can toggle the CSS display, visible, and/or the opacity setting. You can show an overlay div with a high z-index--which I call a "veil" with id="veil"--and then remove it when content is loaded, and use a spinner as the veil. You can also move things completely off the screen until they've loaded, and then move them into place. You can combine these methods.

Personally I've had the best success cross-browser and cross-device with the CSS visibility property. I like how it reserves space for the object in the layout. The other solutions sometimes flake on mobile and some older browsers. Here's a couple of snippets to get you started.

First, set visibility to none with an inline style.
- DISCLAIMER: I am NOT a fan of inline styles, and understand the concept of separation of concerns. In this case, I deem it necessary because this must have the highest cascade priority, be applied as quickly as possible, and I've had good success with it cross-environment. Purists will argue that this should go in a CSS file, but I believe that we should not follow any guideline dogmatically; sometimes we must have the courage to break convention in the presence of strong justification. Let the reader decide.

<div id="pan-content" class="clearfix" style="visibility:hidden">

Then, on page load (using jQuery):

$('#window').load( function() {
    $('#pan-content').css({visibility:'visible'});
});

This might prove to be a little slow, because you're waiting until the whole window loads until you display the banner. You can also attach the event to specific resources, which will speed things up. See the following post:
Detect image load

Hope this helps!

Community
  • 1
  • 1
kmiklas
  • 13,085
  • 22
  • 67
  • 103
  • I could solve the issue based on your suggestion. I found this page http://javascript.about.com/library/blanim02.htm which explained how to do this in a way I could follow even without extensive javascript knowledge. Thanks – afrikapit Feb 08 '14 at 14:11
0

You should never rely simply on order of scripts to determine your execution. Put your calls TN3 in a function that is called in the SmoothDivScroll complete method.

It might be easiest to use the non-minified version to do this.

stewart715
  • 5,557
  • 11
  • 47
  • 80
  • Thanks for your answer. This sounds easy and logic to me. Unfortunately I am not a JS programmer and so I don't know how to put the TN3 in a function which is called in the SmoothDicScroll complete function. Could you please make an example? – afrikapit Jan 30 '14 at 15:15
  • stewart715 do you have an example how to put the TN3 in a function and how to add the SmoothDicScroll complete method to the TN3 query js file. As I said unfortunately I am not a JS programmer. – afrikapit Feb 08 '14 at 12:53