Help with window.load functions.

Help with window.load functions.

I need help with combining an image resize script and a fade in script. Basically I would like the image resize function to happen before the fade in. Here's the code I'm using now. 

  1. jQuery(document).ready(function($) { var $img = $("#pics img"); var ratio; var offsetX = $img.offset().left; var offsetY = $img.offset().top; $(window).load(function () { ratio = $img.width() / $img.height(); $(this).resize(); }); $(window).resize(function () { var viewportWidth = window.innerWidth || document.documentElement.clientWidth; var viewportHeight = window.innerHeight || document.documentElement.clientHeight; var availWidth = viewportWidth - offsetX - 25; var availHeight = viewportHeight - offsetY - 25; if (availWidth / availHeight > ratio) { $img.height(availHeight); $img.width(availHeight * ratio); } else { $img.width(availWidth); $img.height(availWidth / ratio); } }); }); //Fade in of page elements not allowed for IE users because of antialiasing issues with font jQuery(document).ready(function($) { if ( $.browser.msie ){ $(".single h1").css("visibility", "visible"); $(".single p").css("visibility", "visible"); $(".single").css("visibility", "visible"); } else { //$(".loader").css("visibility", "visible"); $(".single h1").css("visibility", "visible"); $(".single p").css("visibility", "visible"); $(".single").css("visibility", "visible"); $(".single h1").css("opacity","0"); $(".single p").css("opacity","0"); $(".single").css("opacity","0"); $(".single h1").animate({opacity:1.0}, "slow"); $(".single p").animate({opacity:1.0}, "slow"); $(".single").animate({opacity:1.0}, "slow"); $(window).load(function(){ $(".single").animate({opacity:1.0}, "slow", function(){ //$(".loader").css("visibility", "hidden"); }); }); } });

Here is a link to the current dev using this code: http://www.richbdesign.com/wpdev/por...letterpress-2/

Any help would be greatly appreciated. Thanks in advance.

Rich