Image size not immediately available

Im trying to pull an image from a ajax request put in onto a page then center it in a div:-
https://jsfiddle.net/kc0yovg6/1/

Which works but the re-positioning of the image doesnt take place after the image is loaded, instead it looks like the image re-positioning is happening on the next cycle from the previous image (hence the jumping around).

When the function is first fired, I can see that $("#imgBackdrop img").height() = 0, then the next time it runs instead of the current loaded image it shows the first image.

Any ideas why this is happening, or even if its possible to fix?
tonelm54Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

tonelm54Author Commented:
Solution is it isn't loaded, so need to put into load(), so this works
				$("#imgBackdrop img").attr("src","/Images/" + jsonData["picURL"]);
				
		
				//Center image in div
				$("#imgBackdrop img").load(function () {
					$("#imgBackdrop img").css("position","absolute");
					$("#imgBackdrop img").css("top",(($("#imgBackdrop").height() - $("#imgBackdrop img").height())/2));
					$("#imgBackdrop img").css("left",(($("#imgBackdrop").width() - $("#imgBackdrop img").width())/2));									
				});
				

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mankowitzCommented:
see https://jsfiddle.net/kc0yovg6/3/

This is possible to fix, but you have to have the dimensions of the new picture before you display it. This is not impossible, but takes a bit of extra work. Another solution is to use CSS to center the image, and then you don't have to do any calculation.

	#imgBackdrop {
	    position:absolute;
	    width:100%;
	    top:0px;
	    height: 650px;
	    background-color:blue;
	}
	#imgBackdrop img {
	    margin: 0;
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    margin-right: -50%;
	    transform: translate(-50%, -50%)
	}
	body {
	    overflow:hidden;
	}
	

Open in new window


Then, your javascript becomes much cleaner: (also note that (I removed the +1 because javascript arrays start at 0, not 1. If that's not what you want, you can add it back in.)

function getPictureChange() {

    $("#imgBackdrop img").attr("src", images[Math.floor((Math.random() * 3))]);
    setTimeout(function () {
        getPictureChange();
    }, 1200);

}

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.