Preloader for Supersites?

**hoja** · 05 September 2016, 03:24 PM

Thanks – but I don't quite follow (and the link doesn't work) :o)
At any rate all my images are named for SEO reasons alone.

**Egg Bramhill** · 05 September 2016, 03:36 PM

Sorry Hoja, I've edit my last post, the link now works

**Egg Bramhill** · 05 September 2016, 03:53 PM

After looking further I don't believe that script is very useful. On testing it throws up some bad results:

Avoid bad requests

The following requests are returning 404/410 responses. Either fix the broken links, or remove the references to the non-existent resources.

There is an interesting article here:

LINK

**Egg Bramhill** · 05 September 2016, 06:58 PM

Okay, update:

The 404/410 file errors were being caused by me copy & pasting Steve's code from that page.

img1.src = "index.htm_files/44.png";
img2.src = "index.htm_files/46.png";
img3.src = "index.htm_files/48.png";
img4.src = "index.htm_files/44.png";
img5.src = "index.htm_files/10.jpg";
img6.src = "index.htm_files/12.jpg";
img7.src = "index.htm_files/14.jpg";
img8.src = "index.htm_files/16.jpg";
img9.src = "index.htm_files/18.jpg";
img10.src = "index.htm_files/18.jpg"

Of course the path should be index_htm_files NOT index.htm_files.

Changing this resolves the errors.

However I'm not convinced it forces loading in the required order.

**hoja** · 05 September 2016, 07:14 PM

Thanks for your time to check all this out Egg but I don't want to do Xaras asset sorting work. Also I'm not sure whether
all this after 8 to 10 years and drastically increased average bandwidth still has the relevance it used to have. My images
have project specific names assigned, that's more useful for having them found.
My point wasn't complaining about long loading times and ways to get rid of them – but needless uglyness while loading. :o)

**Egg Bramhill** · 05 September 2016, 07:39 PM

My point wasn't complaining about long loading times and ways to get rid of them – but needless uglyness while loading.

Neither was I hoja

I was looking at ways of dictating the order in which assets were loaded which might assist in averting the 'needless uglyness while loading.'

However, having read the article re loading assets I believe it's hardly worth the effort. That said, when testing a site using Google Webmaster Tools it often advises to load assets 'above the fold' first. Much of this is ccs & js and highslide scripts google fonts etc that I can't find anyway to do from within Xara. Other matters might be to avoid loading photo sliders at the top of the page etc.

**Egg Bramhill** · 05 September 2016, 09:38 PM

Been looking at this some more and that javascript doesn't look like the way forward. When Xara creates the html it just creates the loading sequence in a first created ( which becomes the backmost asset) first. Then the next created etc. So the backmost object is loaded first & the next to backmost object next etc.

Fun reseaching this and now something I recall from several years ago as the truth, but hey, senior moments can be fun

**digitalphaser** · 06 September 2016, 11:41 AM

JavaScript can not speed up the loading of the site. But JS can control it.
There is a simple way to entertain visitors with animated preloader.
Simple demo of this method can be see here: http://digitalphaser.de/preloader-demo.html

You must open a created page in any text editor and add a few lines.

Click image for larger version.

Name: preloader-html.jpg
Views: 137
Size: 189.5 KB
ID: 114161

1. Create preloader after<body> tag:

<body class="xr_bgb0">
<div id="preloader"></div>

2. Add CSS style and GIF animation. GIF animation file should be paced in the main folder of the site:

<style type="text/css">
div#preloader{
position: fixed;
width: 100%;
height:100%;
background: #FFCC00 url(preloader-demo_html_files/preloader.gif) center no-repeat;
z-index: 10000;
}
</style>

3. Add the JS onload event:

<script type="text/javascript">
window.onload = function(){
var preloader = document.getElementById("preloader");
preloader.style.display = "none";
}
</script>

Due to the fast Internet I made a delay of 1 second.

<script type="text/javascript">
window.onload = function(){
var preloader = document.getElementById("preloader");
window.setTimeout(function(){preloader.style.displ ay = "none";},1000);
}
</script>

4. Save the page with the .html or .htm extension. Done!

Full source:

<style type="text/css">
div#preloader{
position: fixed;
width: 100%;
height:100%;
background: #FFCC00 url(preloader-demo_html_files/preloader.gif) center no-repeat;
z-index: 10000;
}
</style>
<script type="text/javascript">
window.onload = function(){
var preloader = document.getElementById("preloader");
window.setTimeout(function(){preloader.style.displ ay = "none";},1000);
}
</script>
</head>
<body class="xr_bgb0">
<div id="preloader"></div>

**hoja** · 06 September 2016, 02:01 PM

Thanks for your time for setting this up digitalphaser!
Am I correct that the gif plays for a static, predefined duration?
What I'm actually looking for is a Preloader which stays up for as long as Download and Browser Rendering actually take...

**digitalphaser** · 06 September 2016, 02:40 PM

Originally Posted by hoja

Thanks for your time for setting this up digitalphaser!..

No problem. It was not long.

Originally Posted by hoja

...Am I correct that the gif plays for a static, predefined duration?...

No. GIF image is only image that shows the visitor site activity.
I generated it here: http://preloaders.net/en/free

The trick in the Javascript onload event listener. This listener fires only when the content of the site is fully "booted". After loading preloader becomes invisible.

I deliberately took a heavy image(35Mb) to demonstrate this effect. I have a fast internet connection. So I have it lasts no more than 2 seconds. So I made an additional 1 sec. delay. For more evidence.

Originally Posted by hoja

...What I'm actually looking for is a Preloader which stays up for as long as Download and Browser Rendering actually take...

You can use this exmple for your website. Preloader will just wait for a complete download of content.

It is certainly a primitive example. But the principle is always the same.

Xara's sites have a very complex architecture. It is not easy for browser to wade through this mess. Therefore, animation image should be very light(1-4Kb). That immediately to load.