Loading order

[behzad]

Is there a way to instruct the program to display graphics/items at the right order, from top to bottom? I have seen examples of web designer and xara pro websites where things are not loaded yet from top to bottom as the user scrolls.

I am sure you too have come across this. Take for example the site I did below, Ideally I want the red color background to display first then the other items to appear.

http://www.popeyespizza.ca/

[philsafc]

Give the items you want to load after a longer delay on their reveal animation.

[behzad]

Thx, but I am not using animation on these. This is just how things displayed on web browsers. It is out of my control.

[pauland]

I am not aware of Xara being able to do this. On other sites, you can lazy-load assets. I don't think Xara does that. Not on my ancient version, anyway.

[behzad]

Would be nice if the background loads up first.

[Egg Bramhill]

Look at post No6 in this thread:
http://www.talkgraphics.com/showthread.php?34830-Load-Order-of-images-using-xara

[gwpriester]

Well spotted Egg.

[behzad]

Merci to both

[Cloud]

If I'm getting this straight you want certain elements to become visible as the user scrolls down the site? If so that you can use animate.css to achieve this, I don't know how it would work in xara (not used in a while) but the code is:

Use the following code to reference the actual script

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/wow/1.0.3/wow.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.1/animate.min.css">


Then you would add the following code, an example of the code would be:

<script>
$('.elem-1').addClass('wow slideInLeft');
$('.elem-2').addClass('wow slideInRight');
$('.elem-3').addClass('wow slideInLeft');
$('.elem-4').addClass('wow slideInRight');
</script>

<script>
$('.elem-1').attr({'data-wow-duration':'1s', 'data-wow-delay':'0.3s'});
$('.elem-2').attr({'data-wow-duration':'1s', 'data-wow-delay':'0.3s'});
$('.elem-3').attr({'data-wow-duration':'1s', 'data-wow-delay':'0.3s'});
$('.elem-4').attr({'data-wow-duration':'1s', 'data-wow-delay':'0.3s'});
</script>

<script>
new WOW().init();
</script>

.elem-1 is the name you give to the element you want to animate

The first half of the code adds the animation you want for each element and the second half of the code introduces the delay. You can check the full animation set at http://daneden.github.io/animate.css/

If this is what you are looking for I hope it works for you in xara. Like I said not sure how it's used but it's usually just inserted in the head or body sections and as far as I can remember one is able to give names to elements in xara.

[Acorn]

A small contribution.

If you use flat colour rectangles for backgrounds then these are loaded in very quickly as they are rendered as SPANs with a background-color so no image fetch is needed.
There are CSS enhancements that can be used to modify these without resorting to images at all.

Once you get started, you start creating CSS buttons and CSS NavBars...

The CSS approach to early image loading would be to set up a pre-fetch like:

<style>#preloadBackground { background: url(index_htm_files/background.jpg) no-repeat -9999px -9999px; }</style>

in the Page's header. You need to Name the image with filename="background".

Acorn