Changing image depending on div contents

Question

I have a jquery div returning simple text and I want to display a different image without the user noticing a flash every few seconds.

<script>
function status(){
    $('#status').empty();    
    $('#status').load('status/<?php echo $call->sid;?>');
    setTimeout(status, 5000);}
    status();
</script>

So this refreshes every 5 seconds to get the status. How can I assign various images depending on the returned results? Ex (calling, in-progress, completed).

score 0 · Accepted Answer · answered Feb 20 '12 at 07:53

0

Try this:

<script type="text/javascript">
function status(){
    $('#status').empty();    
    // the request is not yet performed, set loading
    $("#status").html('Loading');

    // make the request
    $.get('status/<?php echo $call->sid;?>', function(data){
        // the request is complete
        // assuming the data retrieved is HTML
        $("#status").html(data);

        // call the function again after 5 seconds
        setTimeout(status, 5000);
    });
}

// when the document has loaded
$(document).ready(function(){
    // call the status function
    status();
});
</script>

answered Feb 20 '12 at 07:53

Stelian Matei

11,553
2
25
29

That pretty much gets me where I am now...but I want to load various images via jquery depending on what the response is. I could easily do if else in php...but I think the image would flash on reload rather than when the status changed. Basically I just want a way to show the status of this activity. – John Brooks Pounders Feb 20 '12 at 08:00
3

There are different requests here: FIRST REQUEST to PHP to get the html or json containing the new images, SECOND REQUEST to the server to load that image. If you want to avoid flickering, you could preload images before displaying them: http://stackoverflow.com/questions/476679/preloading-images-with-jquery – Stelian Matei Feb 20 '12 at 08:07

Changing image depending on div contents

1 Answers1