Question

我有几行JavaScript使用jQuery将图像调整为缩略图。

    var thumb = $(this);
    thumb.load(function() {
        var ratio = thumb.height() / config.maxHeight;
        var newWidth = Math.ceil(thumb.width() / ratio);
        thumb.height(config.maxHeight);

        // this line matters
        thumb.width(newWidth);
    });

幸运的是，这个工作正常。但如果我用最后一行替换：

        thumb.width(Math.ceil(thumb.width() / ratio));

它改变了未明确定义尺寸的图像的宽度（太窄）。对我来说，似乎是完全等同的方式 - 通过变量或直接 - 但显然它们不是。

我尝试将ceil（）结果转换为数字或整数并且表现相反 - 具有未定义尺寸的图像可以，但其余部分太宽（原始图像的宽度）。

虽然我是第一个解决方案，但我猜有一些基本的东西我不见了。所以我想在将来避免它。

谢谢！

Answer 1

var someImg = new Image();
someImg.src = <theURLofDesiredImage>
alert(someImg.width + " : " + someImg.height);

这不是Jquery，而是它的vanilla JS，它是确定“卸载”（未缓存！）图像的真正方法。将查询字符串添加到URL url + "?asdasdasdadads"将允许您绕过缓存图像的浏览器。这将导致更长的“图像加载时间”，但您将始终并且更重要的是，可预测，解析动态加载的图像。

Answer 2

我猜你正在操作的<img>元素没有声明height或width属性。如果是这种情况，那么问题就是浏览器如何仅在给定一个约束的情况下智能地调整图像大小。

如果您的图片宽度为1000像素，高度为1000像素，那么您可以像这样写一个IMG标记：

<img src="big_image.gif" width="10" />

现代浏览器会将大图像的大小调整为10 x 10px。

所以，在你改变高度的那一行：

thumb.height(config.maxHeight);

浏览器继续也改变宽度。如果您随后读取了宽度（即thumb.width(Math.ceil(thumb.width() / ratio))），您将会读取新的宽度，而不是在获得新高度之前的宽度。

jQuery图像调整大小 - 在变量上直接给出不同的结果

2 个答案: