ECU Loading Idea

05/09/09 3:08 PM

Just in case an Easy Content Unit is a little slow to load (happens every now and then), I thought this might help – an animated gif in the background that tells the visitor that the unit is loading.

Once the unit has loaded it hides the animation (just need to make sure your unit has a background colour set). Could hopefully lessen the chances of a user leaving the page if the ECU doesn’t appear straight away.

It only really works for ECU units like the one below and does involve a little bit more work than just pasting the ECU code.



This is what you would see if the unit above didn’t load straight away –

Might be possible to improve on this idea?

If anyone wants to use this idea feel free to pinch the code & graphics -

Since ECU have now improved speeds and set up a caching feature, this loader is no longer needed

Share this
  • del.icio.us
  • Digg
  • Mixx
  • Propeller
  • StumbleUpon
  • Technorati
  • TwitThis
Posted by Paul Dixon | in Affiliate Marketing, Web design | 4 Comments »
«
»

4 Comments on “ECU Loading Idea”

  1. Jon Cook Says:
    December 8th, 2009 at 12:00 am

    Paul,

    Just having a try at implementing this and I’ve almost got it there.

    I am having an issue lining up the loading image and the ECU if you look at http://www.fishkettle.co.uk/test

    The image loads higher than ECU.

    I changed the wording part on mine as it more suits the function that it will be carrying out.

    Is there anyway it could maybe be swapped out for something like http://www.istockphoto.com/stock-video-7983021-computer-progress-loading-bar.php or even a flash file http://www.istockphoto.com/stock-flash-1421532-cool-flash-loader.php

  2. Paul Dixon Says:
    December 8th, 2009 at 12:21 am

    Hi Jon,

    To be honest it doesn’t work as well for the kind of units on your site, I have some similar units but haven’t bothered adding the loading graphic. That said you could try experimentiong with centring the background graphic verticaly and adding a min height.

    #ecu{
    min-height:300px;
    padding-left: 8px;
    background-image: url(../graphics/final-loader.gif);
    background-repeat: no-repeat;
    background-position: center center;
    }

    I’d recommend using a single graphic as it makes it easier.

    It would take quite a bit of work to create something similar to the istock examples and would probably add significantly to the load times of the page in general.

  3. Peter Says:
    December 9th, 2009 at 9:33 am

    Hi Paul,

    Does this work for ECU PHP code? I can get it working when I use the ECU Javascript code but not PHP?

    Thanks,

    Peter.

  4. Jon Cook Says:
    December 10th, 2009 at 12:39 pm

    Thanks Paul,

    Implemented across my sites and am now incredibly happy!

    Many thanks!

    Jon


Leave a Reply