Question

Is there a way to hide an object until my script is done loading? Using ajaxcomplete() or ajaxSuccess() didn’t work. Below an example script.

there is an image with the id: imagefocus, every time i change the image via ajax, you see for a split second the original image size.

$("#imageFocus").bind("load", function(){
    var width = $(this).width();
    var height = $(this).height();

   if(height > 443) {
        var scaleRatio  = height / 443,
            width       = Math.round(width / scaleRatio),
            mLeft       = Math.round((590 - width) / 2);
        $(this).css({
            height:     "443px",
            width:      width+"px"
        });
        $(this).parent().css({
                marginTop:  "0px",
                marginLeft: mLeft+"px"
        });
    }
}

Answer 1

Hide the image through css and then show it on it’s load event. Also before you make ajax call hide the image, the below code will take care of showing it once the image is loaded.

Css

#imageFocus{
    display:none;
}

JS

$("#imageFocus").bind("load", function(){
    var $this = $(this);
    var width = $this.width();
    var height = $this.height();

   if(height > 443) {
        var scaleRatio  = height / 443,
            width       = Math.round(width / scaleRatio),
            mLeft       = Math.round((590 - width) / 2);

        $this
        .css({
            height:     "443px",
            width:      width+"px"
        })
        .show() //<---------Show the image
        .parent()
        .css({
                marginTop:  "0px",
                marginLeft: mLeft+"px"
        });
    }
}