CODEWITHSUNDEEP
jquerycssajax
Daan Verberne
Daan Verberne

Reputation: 45

jQuery show item when jquery generated css is finished loading

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"
        });
    }
}

Upvotes: 0

Views: 133

Answers (3)

ShankarSangoli
ShankarSangoli

Reputation: 69905

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"
        });
    }
}

Upvotes: 3

Semyazas
Semyazas

Reputation: 2101

That happens because the load finishes and auto-inserts your image. You cannot achieve the behavior you want in the actualcallback. Instead create a function, that hides the image and after that loads the new one. Then in the callback, make it visible again

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

Yes, start with:

$("#imageFocus").hide()

and end with (in your load function)

$("#imageFocus").show()

Upvotes: 0

Related Questions