I've this issue: On my small webpage of the developing Wordpress site: http://baksagaspar.com/MH-work/ I've an animation with this particular jQuery + jQueryUI(scale) script:

jQuery(function($) {  

// home image set dimensions related to screen size
var Swidth = screen.width;
var imgw = $('#main-back-imghome').width();
var imgh = $('#main-back-imghome').height();
var imgpercent = (imgw / Swidth);
var imgWN = imgw * imgpercent;
var imgHN = imgh * imgpercent;

// now show  
$('#main-back-imghome').css( {width: imgWN, height: imgHN} ).center().hide().delay(1000).show("scale", {}, 3500);


The issue I've is the fact that initially when i first go to the page, the animation isn't triggering, but on refresh, and then things are fine. it really is annoying the very first time site visitors to obtain a complete blank page on first-enter :-(

My idea ended up being to in some way test when the animation has triggered, and when not - to begin it, but maybe that isn't the proper way...

Any suggestions how you can solve this?

I believe the animation is triggered however it does not understand how large the half megabyte image happens when it begins. Everything works fine on refresh since the image is incorporated in the browser's cache with that time.

Inside your HTML, you've this:

<img id="main-back-imghome" src=".." />

Notice you don't have width or height characteristics. If you do this around the first load:

var imgw = $('#main-back-imghome').width();
var imgh = $('#main-back-imghome').height();

The look data will not be loaded therefore the width and height is going to be zero and thus imgWN and imgHN may also be zero.

I'd put width and height characteristics on #main-back-imghome and style="display:none;" then, alter the initial .css() call for this:

    width: imgWN,
    height: imgHN,
    display: 'inline-block'

The width and height characteristics should provide you with helpful imgWN and imgHN values even if the look data has not loaded. Beginning with display:none should avoid a preliminary shrink from full-sized for your scaly lower beginning size you may also try beginning with visibility:hidden and visibility: 'visible' within the .css() call if playing with display does not work.