Question

I have this problem:
On my home page of a developing WordPress site: http://baksagaspar.com/MH-work/ I have an animation with this 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 problem I have is that when I first visit the page, the animation is not triggering, but on refresh, and after that everything is fine. it is really distracting for the first time visitors to get a complete blank page on first-enter 🙁

My idea was to somehow test if the animation has triggered, and if not – to start it, but maybe that’s not the right way…

Any suggestions how to solve this?

Answer 1

I think the animation is triggered but it doesn’t know how big the half megabyte image is when it starts. Everything works fine on refresh because the image is in the browser’s cache by that time.

In your HTML, you have this:

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

Notice that you don’t have width or height attributes. When you do this on the first load:

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

The image data won’t be loaded so the width and height will be zero and so imgWN and imgHN will also be zero.

I’d put width and height attributes on #main-back-imghome and style="display:none;"; then, change the initial .css() call to this:

$('#main-back-imghome').css({
    width: imgWN,
    height: imgHN,
    display: 'inline-block'
})

The width and height attributes should give you useful imgWN and imgHN values even when the image data hasn’t loaded. Starting with display:none should avoid an initial shrink from full size to your scaled down starting size; you can also try starting with visibility:hidden and visibility: 'visible' in the .css() call if messing with display doesn’t work.