Question

So I have a simple AJAX request (not JQuery):

function ajaxfunction(){
var ajaxRequest;
try{
    ajaxRequest = new XMLHttpRequest();
        } catch (e){
    try{
        ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try{
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e){
            alert("Your browser sucks"); //error
            return false;
        }
    }
}

ajaxRequest.open("GET", 'pull.php?ms='+new Date().getTime(), true);
ajaxRequest.send(null);  
ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4){
    var ajaxDisplay = document.getElementById('ajaxDiv');
        ajaxDisplay.innerHTML = ajaxRequest.responseText;
    }
}

}

And I want the request to also pull pictures. Since the request is dynamic (the images shown will change) I do the request over and over. This, however, makes the images flicker. I tried <img src="foobar.jpg" style="visibility:none;" onLoad="this.style.visibility='visible';" /> but that doesn’t really help. If anybody knows of any fix, thank you in advance. 😀

Answer 1

Maybe instead of pulling then entire <img> tag in the ajax response just get the image name and properties to change the targeted image src, height, width, etc… properties to use the new image.