problem with images load on setTimeout

Question

Hello everybody,

I have a problem, that i seems not be able find my way around it.

The problem is, that I load images and some text trough ajax call, and then after some time i try to call ajax function again to get new set of images and text. However my problem is that images don't load in time (everything is fine with the text load) they kinda stop loading and then next call to ajax made.

Is there a way around this problem ?

I would really appreciate help from somebody.

EDIT: It seems that setTimeout("", 30000); working with different speed on firefox and IE. Is there a way to set it for a minute, i tried to put it 60000 but got same results in terms of how time passes until it calls to ajax...

Here is my code:

HTML

 <asp:Panel ID="portfolio" runat="server" style="border:solid 1px black; height:300px; width:400px; display:none;">
        <div id="div_before">
            <img id="img_before" alt="" height="200" width="100" />
            <span id="txt_before"></span>
        </div>
        <div id="div_after">
            <img id="img_after" alt="" height="200" width="100" />
            <span id="txt_after"></span>
        </div>
    </asp:Panel>

And my javascript:

 function getPortfolio() {
            $.ajax({
                type: "POST",
                url: "Portfolio.aspx/GetImages",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(msg) {
                    onCallBack(msg);
                }
            });
        }


        function onCallBack(msg) {
            var result = msg.d;
            if (result != null) {
                var portfolio_div = $("div[id*='portfolio']");

                $(portfolio_div).css({ 'display': 'block' });

                var imgs = $(portfolio_div).find("img");

                $("#img_before").attr({ src: "images/" + result.img_before.toString() });
                $("#img_after").attr({ src: "images/" + result.img_after.toString() });

                var txts = $(portfolio_div).find("span");

                $(txts[0]).text(result.txt_before);
                $(txts[1]).text(result.txt_after);

                setTimeout("", 30000);
                getPortfolio();
            }
            else {
                $(portfolio_div).css({ 'display': 'none' });
            }
        }

Answer 1

I'm not sure what you're trying to do -- it looks like you expect setTimeout tyo be synchronous (eg. block the js execution).

Are you sure you don't want

setTimeout(getPortfolio, ...)

And you really should be using image.onload if you're waiting for loads to complete...

Answer 2

It should be

setTimeout('getPortfolio()', ...)

instead of

setTimeout(getPortfolio(), ...)

if your code is same as above, getPortfolio() method will be called only once (not in every interval). It ll be immediately called on firing settimeout..

Cheers

Ramesh Vel