jQuery show item when jquery generated css is finished loading

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

ShankarSangoli · Accepted Answer · 2012-01-31 15:27:31Z

3

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

edited Jan 31, 2012 at 15:27

answered Jan 31, 2012 at 15:20

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Daan Verberne Over a year ago

Thanks very much. So simple yet so effective. :)

Diodeus - James MacFarlane · Accepted Answer · 2012-01-31 15:16:06Z

0

Yes, start with:

$("#imageFocus").hide()

and end with (in your load function)

$("#imageFocus").show()

answered Jan 31, 2012 at 15:16

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

2 Comments

Daan Verberne Over a year ago

i tried this, didn't work. #imagefocus is a image, every time the image changes via ajax, you still see for a split second the original image size.

Diodeus - James MacFarlane Over a year ago

Before hiding, use: $("#imageFocus").attr('src','')

Semyazas · Accepted Answer · 2012-01-31 15:25:06Z

0

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

answered Jan 31, 2012 at 15:25

Semyazas

2,10114 silver badges14 bronze badges

Collectives™ on Stack Overflow

jQuery show item when jquery generated css is finished loading

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related