CODEWITHSUNDEEP
jqueryajaxjsoninternet-explorer-8internet-explorer-7
user1937021
user1937021

Reputation: 10781

AJAX JSON only loading once, when refreshing it fails (only in IE7 & 8)

I have a microsite which loads in JSON content with Ajax, it works first time in IE7 and IE8, but if I refresh those browsers it fails, I have checked in fiddler and I receive no errors. Could it be an error in the code somewhere?

var firstBackgroundImage = new Image();
                firstBackgroundImage.src = "img/bg-img.jpg";        
                firstBackgroundImage.onload = function () {
                    $('#loading-image').hide();
                    $(".wrap").fadeIn(300);
                    loadContent();
                };

function loadContent(){ 
    $.ajax({
        url: "json/" + language + "/content.json",
        data: "nocache=" + Math.random(),
        type: "GET",
        cache : false,
        contentType: "application/json",
        dataType: "json",
        success: function(source){
            data = source;
            showStartpage(data);
            showInfo(data);
        },
        error: function(data){
            alert("Failed to load content");
        }
    }); 

}

The alert "Failed to load content" doesn't appear either it just shows the loading image I have in place, any possible faults there might be? Anyone ever had same problem?

Thanks!

Upvotes: 0

Views: 294

Answers (1)

Anthony Grist
Anthony Grist

Reputation: 38345

It works the first time because Internet Explorer isn't loading the image from cache, so the load event fires after your firstBackgroundImage.onload = ... line to set up the event handler. However, on subsequent page loads it is using a cached version of the image, and as a result the load event is firing before you've set up the event handler for it.

Simply change the order of those two lines. Set the load event handler and then set the src property of the image:

var firstBackgroundImage = new Image();
firstBackgroundImage.onload = function () {
    $('#loading-image').hide();
    $(".wrap").fadeIn(300);
    loadContent();
};
firstBackgroundImage.src = "img/bg-img.jpg";

Upvotes: 2

Related Questions