Dynamically preloading images with JQuery through AJAX

Question

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;
  });

If they're changing every 3 seconds, preloading won't really help you very much, it's going to flicker just as much. — user400654
– user400654, Commented Jan 10, 2014 at 21:13
@adeneo It's 32x32 sized pictures. (I can change them to 16 if it needs to be) — NineNine
– NineNine, Commented Jan 10, 2014 at 21:14
Well, look at it this way. Preloading generally is done with images that aren't immediately shown, such as images in a slideshow, images that you can later zoom in on, or images that show up on hover. If you're showing your images immediately after the ajax request, there won't be much benefit to preloading them. Preloading them will only allow you to delay showing any of them until they are all loaded, which will still cause a flicker. — user400654
– user400654, Commented Jan 10, 2014 at 21:16

adeneo · Accepted Answer · 2014-01-10 21:42:40Z

1

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]);
});

edited Jan 10, 2014 at 21:42

answered Jan 10, 2014 at 21:34

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brian A. Henning · Accepted Answer · 2014-01-10 21:22:40Z

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.

Collectives™ on Stack Overflow

Dynamically preloading images with JQuery through AJAX

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related