Question

Okay, so I’m trying to do some animation. Here is the test page.

There’s a fair quantity of code and I think it’s all relevant, so pasting it here might not be worthwhile. I can post the function definitions:

var ImageLoader = function(c,imagelist,oncomplete) {
    var l = 0, imgs = [], i, loaded = 0;
    for( i in imagelist) {
        l++;
        imgs[i] = new Image();
        imgs[i].style.position = "absolute";
        imgs[i].style.left = "100%";
        c.appendChild(imgs[i]);
        imgs[i].onload = function() {
            loaded++;
            if( loaded == l) oncomplete(imgs);
        };
        imgs[i].onerror = function() {
            alert("Failed to load "+this.src);
        };
        imgs[i].src = imagelist[i];
    }
};
var img2bg = function(c,img) {
    var d = document.createElement('div');
    d.style.width = img.width+"px";
    d.style.height = img.height+"px";
    d.style.backgroundImage = "url('"+img.src+"')";
    d.style.position = "absolute";
    d.style.left = "100%";
    c.appendChild(d);
    return d;
};
var Animate = function(callback,time,thenwhat) {
    var start = new Date().getTime();
    var timer = window.setInterval(function() {
        var now = new Date().getTime();
        var pos = Math.min(1,(now-start)/time);
        if( callback) callback(pos);
        if( pos == 1) {
            clearInterval(timer);
            if( thenwhat) thenwhat();
        }
    },25);
};

However, as I mentioned, this probably isn’t very useful on its own.

Anyway, on to the point, this animation works perfectly in IE9, IE10, Chrome, Firefox… But in IE8 and 7 it fails miserably.

In the callback function for ImageLoader, I call img2bg on two specific images. But for some reason the function is getting called twice for one of the images, and four or five times with no second argument at all. There is literally no other call to img2bg in the entire script, so what gives?

Answer 1

The “solution” to the problem is to feature-detect and make the animation optional so that old browsers can just skip past it or play a simpler one.