IE7,8调用所有错误的功能？

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

Are you sure all the features you are trying to use work in IE7/8? You use opacity which does not. I know background-position was buggy at best. You use the html5 doctype so I don't know if that means you might be using html5 elements or APIs, too. This is what makes me think the problems lie there.

Answer 2

该问题的“解决方案”是对特征进行检测并使动画可选，以便旧的浏览器可以跳过动画或播放更简单的动画。