CODEWITHSUNDEEP
javascriptjqueryhtmlajaximage
NineNine
NineNine

Reputation: 324

Dynamically preloading images with JQuery through AJAX

I have a javascript that basically loads an array of names, and then it loads each one of those images from another website.

They're of course flickering like **.

I would like to preload these images, but since they change every 3 seconds, it's really hard to preload them.

However, only some of the images change.

You can see how it happens on this link when pressing the Factions "player count".

The current code i have is this:

  $.ajax({
    type: "GET",
    url: "updater/updateFactions.php"
  }).done(function(data) {
    var newData = data.split(":");
    document.getElementById('factions').innerHTML = newData[0]+"/"+newData[1];
    var playerData = newData[2].split(",");
    var data = "";
    for(i in playerData) {
        data += "<img src='http://signaturecraft.us/avatars/5/face/" + playerData[i] + ".png'>";
    }
    document.getElementById('factionsplayers').innerHTML = data;
  });

Upvotes: 0

Views: 314

Answers (2)

adeneo
adeneo

Reputation: 318182

You can get the images, preload them and change the content once all images are loaded

$.ajax({
    type: "GET",
    url: "updater/updateFactions.php"
}).done(function (data) {
    var newData    = data.split(":"),
        playerData = newData[2].split(","),
        promises   = [],
        images     = $.map(function(image) {
            var def = $.Deferred(), 
                img = new Image(),
                src = 'http://signaturecraft.us/avatars/5/face/' + image + '.png';

            img.onload = function() {
                def.resolve();
            }
            img.src = src;
            if (img.comlete) img.onload();

            promises.push(def.promise());
            return $(img);
        });

    $.when.apply($, promises).done(function() {
        $('#factionsplayers').html(images);
    });

    $('#factions').html(newData[0] + "/" + newData[1]);
});

Upvotes: 1

Brian A. Henning
Brian A. Henning

Reputation: 1511

You're getting flicker because you're always replacing all of the content of the 'factionsplayers' element, forcing the browser to redraw the whole thing.

I suggest creating an entire layout that can hold all 100 player icons if they're there (a table would be one way, but there's a whole school of thought that says never use tables for layout, only for tabular data). Your javascript could then add and remove images from individual cells of the layout. Assuming your layout has multiple rows (it must, given the size of the images), you can show and hide entire rows based on whether the row has anything in it.

Since the layout pieces don't change, you'd only get noticeable flicker when whole rows came and went, or if a single cell changed often. You could further reduce the individual cell flicker by having your script not move player images that are still on the server from one update to the next. This could cause gaps in your layout, of course, which you would have to decide to handle.

Upvotes: 0

Related Questions