TestProject Forum
Powered by leading experts in the test automation community

Load image with ajax (jQuery)

I need to make an image load with ajax call:

$.ajax({
    type: "GET",
    url: url,
    dataType: "jsonp",
    jsonp : "onJSONPLoad",
    jsonpCallback: "imgCallback",
    crossDomain: "true",
    success: function(res) {
        console.log("Success");
    },
    error: function (xhr, status) { 
        console.log('error: ' + status);
    }   
});

How can I achieve this ?

<div id="imageLoader" style="display: none">
<img src="" />
</div>

<script>
$(function() {

    $('#imageLoader').show();

    $.ajax({ 
        type: "GET", 
        url: surl, 
        dataType: "jsonp", 
        cache : false, 
        jsonp : "onJSONPLoad", 
        jsonpCallback: "newarticlescallback", 
        crossDomain: "true", 
        success: function(response) { 
            $("#imageLoader").hide();
            console.log("Successfully loaded image"); 
        }, 
        error: function (xhr, status) {  
            $("#imageLoader").hide();
            alert('unable to load: ' + status); 
        }
    });  
});
</script>