JavaScript Image().width 返回 0

Question

我需要使用 display:none 获取图像的宽度和高度，并且我得到的宽度和高度均为 0。这是我的代码:

for (i = 0; i <= slideCount; ++i) {
            imgPath = slideshow.eq(i).attr("src");
            imgEle = new Image();
            imgEle.src = imgPath;

            imgEle.addEventListener("load", function () {
                imgSize = [imgEle.width, imgEle.height];
                if ((imgSize[0]/imgSize[1]) > (boxSize[0]/boxSize[1])) {
                    slideshow.eq(i).css("height", "100%");
                }
                else {
                    slideshow.eq(i).css("width", "100%");
                }
            });
        }

我尝试了 onload = funcion() {} 方法，并且不检查图像是否已加载，但宽度和高度仍然为 0。更重要的是，当我在 Chrome 上启动控制台时并引用这些字段我得到了正确的值。

Answer 1

这是因为在循环中错误地使用了闭包变量，当加载处理程序执行时变量imgEle引用最后一个图像对象引用，而不是调用加载事件的引用，因此当加载第一个元素时，最后一个元素可能尚未加载，因此 imgEle.width/imgEle.height将返回0

您可以使用 this它将引用在加载事件处理程序中调用加载事件的元素

据我所知，您需要的是

slideshow.each(function () {
    var $this = $(this);
    var imgPath = $this.attr("src");
    var imgEle = new Image();
    imgEle.src = imgPath;

    imgEle.addEventListener("load", function () {
        var imgSize = [this.width, this.height];
        if ((imgSize[0] / imgSize[1]) > (boxSize[0] / boxSize[1])) {
            $this.css("height", "100%");
        } else {
            $this.css("width", "100%");
        }
    });
})

注意:数组索引从0...length-1开始所以你的循环条件 <= slideCount;可能需要重新考虑