Append div (loading) when there is no new data

JavaScript
1

The following AJAX method for a news system:


    function addmsg(msg){
        $("#news").append(
            "<div class='msg'>"+ msg +"</div>"
        );
    }
    function waitForMsg(){
        $.ajax({
            type: "GET",
            url: "modules/news.php",
            async: true,
            cache: false,
            timeout:20000,
			success: function(data){
				if(data) { 
                    addmsg(data)
                } else {
                    setTimeout(waitForMsg, 1000);
                };
            },
            error: function(XMLHttpRequest, textStatus, errorThrown){
                addmsg("error", textStatus + " (" + errorThrown + ")");
                setTimeout(
                    waitForMsg,
                    15000);
            }
        });
    };

    $(document).ready(function(){
        waitForMsg();
    });

What I am looking for is to append a loading div (preferably with a loading image to div news when there are no new news items. Is it easy to implement something like that in the structure as it is now or should I make adjustments?

I tried something by adding the following to the very top of the script:

var loader = jQuery('<div id="loader"><img src="images/loading.gif" alt="loading..." /></div>').hide();

and added this to the else statement along with the setTimeout(waitForMsg, 1000);:


loader.show();

But that didn’t give me the desired results

2

this if…else block only runs when the success function is called (i.e. if you have a response). since you want to immediately show the loader, call it before you start the AJAX call.

3