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

jQuery image resizing - over a variable and directly gives different results

本文关键字：结果 变量 一个 调整 图像 jQuery      更新时间：2023-09-26

我有几行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（）结果强制转换为Number或Integer，但它的行为相反——具有未定义维度的图像可以，但其余部分太宽（原始图像的宽度）。

虽然我的第一个解决方案是有效的，但我想我缺少一些基本的东西。所以我想在未来避免它。

谢谢！

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

如果你有一个1000像素宽、1000像素高的图像，并且你写了一个IMG标签，如下所示：

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

现代浏览器将渲染大小缩小到10 x 10的巨大图像。

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

thumb.height(config.maxHeight);

浏览器继续运行，也更改宽度。如果你随后读取宽度（即thumb.width(Math.ceil(thumb.width() / ratio))），你将读取新的宽度，而不是在被赋予新高度之前的宽度。

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

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

相关文章：