CODEWITHSUNDEEP
javascriptjquerycsshtml
Stan
Stan

Reputation: 26501

Do something when $.get is fully completed

I have a problem. I want to do something when my GET is fully completed, because I need to place BG in the middle. This function is totally working on resize, but this won't work when I load image onClick. Any way to avoid this one?

Example:

getBG.php returns <img id="bgImage" src="123.jpg" />

Problem:

It will not correctly calculate variable a because I think that it is trying to do that before image is even loaded. It works just fine onResize event when image is fully loaded.

$.get("getBg.php", {
            img: (this).id
        },
        function(data){
            $("#bg").html(data);
            var a = $("#bgImage").height() - $(window).height();
            $("#bgImage").css("margin-top", - a / 2);
        });

Upvotes: 0

Views: 95

Answers (2)

jzilla
jzilla

Reputation: 1703

You need to hook the load event of the new image directly. I'm assuming the element of #bgImage is the image, this is probably what you want.

$.get("getBg.php", {
            img: (this).id
        },
        function(data){
            $("#bg").html(data);
            $("#bgImage").load( function() {
                var a = $(this).height() - $(window).height();
                $(this).css("margin-top", - a / 2);
            }
        });

Upvotes: 1

ceejayoz
ceejayoz

Reputation: 180004

You'll need to use setTimeout to loop until $("#bgImage").height() is greater than zero.

Upvotes: 0

Related Questions