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引用最后一个图像对象引用，而不是调用load事件的引用，所以加载第一个元素时，可能尚未加载最后一个元素，因此imgEle.width / imgEle.height将返回0

相反，你可以使用this来引用在load事件处理程序中调用load事件的元素

从我所看到的，你需要的是

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;可能需要重新查看

Answer 2

每次循环运行时都会覆盖

imgEle。在其周围包装一个匿名函数以防止出现此问题。

for(var i = 0; i <= slideCount; ++i) {
    (function(i){
        var imgPath = slideshow.eq(i).attr("src");
        var 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%");
            }
        });
    })(i);
}

JavaScript Image（）。width返回0

2 个答案: