Question

简而言之，我试图获取任何给定div的背景图像的尺寸，这样我就可以用它做一些花哨的精灵动画。下面的代码是简化版本，但说明了阻塞问题。

给定带有样式背景图像的div，使用类＆＃34;动画＆＃34;，以下将返回FF / Safari / Chrome中背景图像的naturalWidth，但不会返回任何IE：

var testarray = [];
var divs = document.getElementsByClassName("animation");

console.log("testarray.length: ", testarray.length);

onload = function starttest(){
    console.log("in onload");
    console.log("testarray.length: ", testarray.length); //returns correct length in all browsers
    console.log("testarray[0].src: ", testarray[0].src); //returns filename in all browsers
    console.log("testarray[0].naturalWidth: ", testarray[0].naturalWidth); //returns 0 in IE only
}

document.onreadystatechange = function(){
    console.log("in readystatechange");
    console.log("document.readystate: ", document.readyState);
    var thing = new Image();
    testarray.push(thing);
    if (document.readyState === "interactive") {
        var bi = window.getComputedStyle(divs[0], false).backgroundImage.slice(4, -1);
        testarray[0].src = bi;
        document.body.appendChild(testarray[0]);
    }
}

以上内容在body标签下方的嵌入式脚本中运行。

为什么加载的图片在IE中没有尺寸？ appendChild也在IE中默默地失败，尽管在其他浏览器中效果很好。我更喜欢jQuery的原生JS答案。

onreadystatechange在浏览器之间不能一致地工作

0 个答案: