使用 JQuery 在 Chrome 中调整图像大小答案

【问题标题】：Resizing images in Chrome using JQuery使用 JQuery 在 Chrome 中调整图像大小
【发布时间】：2023-03-09 18:07:01
【问题描述】：

我今天遇到了最奇怪的错误。我不确定这是 Chrome 中的错误还是我可以解决的问题，但这里是。

我构建了一个 JQuery 函数来调整论坛上发布的一组图像的大小：

$(".post-message img.post-image").load(function(){
    $(this).each(function() {
        var maxWidth = 200;     
        if($(this).width() > maxWidth)
        {
            var factor = $(this).width() / maxWidth;
            var width = $(this).width();
            var height = $(this).height();
            $(this).css('width', width / factor);
            $(this).css('height', height / factor);
        }       
    });
});

问题是这似乎只在我刷新页面时才有效。当您按上一个或链接到该页面时，它不起作用。

在 chrome 中，当函数不起作用时，$(img).width() 属性在两种情况下都返回 0。

此函数在 IE9 和 FF3 中按预期执行

我能做些什么来解决这个奇怪的行为？

【问题讨论】：

我假设这一切都在 document.ready 或类似的东西中？
不，不是。我从堆栈中得到另一个答案，建议改为在 $(img).load() 上执行代码。问题实际上是在这两种情况下它都不起作用$(this).width() 返回 0。让我把它添加到问题中。
尝试在其中包装一个 document.ready 或其他东西，看看它是否有效。 Chrome 可能会在加载图像之前执行脚本，使其宽度为 0。
还是同样的问题，我之前也试过了。

标签： javascript jquery image google-chrome resize

【解决方案1】：

很可能是因为正在从浏览器缓存中提取图像，而load 事件未触发。如果图像的complete 属性已设置，则解决此问题的方法是手动触发load：

$(".post-message img.post-image").one("load", function(){
    $(this).each(function() {
        var maxWidth = 200;     
        if($(this).width() > maxWidth)
        {
            var factor = $(this).width() / maxWidth;
            var width = $(this).width();
            var height = $(this).height();
            $(this).css('width', width / factor);
            $(this).css('height', height / factor);
        }       
    });
}).each(function() {
    if(this.complete) $(this).trigger("load");
});

【讨论】：

我仍然遇到同样的问题。快速调试显示返回页面后触发该函数时该函数不知道图像的宽度。还要强调加载事件被触发，$(this).each() 中的回调被执行。

【解决方案2】：

感谢大家的贡献。以前在堆栈上给出的答案 - 我今天下午显然找不到 jQuery && Google Chrome - 解决了我的问题！

$(window).load(function() {
    $(".post-message img.post-image").one("load", function(){
        $(this).each(function() {
            var maxWidth = 200;     
            if($(this).width() > maxWidth)
            {
                var factor = $(this).width() / maxWidth;
                var width = $(this).width();
                var height = $(this).height();
                $(this).css('width', width / factor);
                $(this).css('height', height / factor);
            }   
            console.log($(this).width())    
        });
    }).each(function() {
        if(this.complete) $(this).trigger("load");
    });
});

代码必须与 karim79 提供的代码一起在 $(window).load() 上执行。

【讨论】：

【解决方案3】：

Karmin 在这里是正确的。几年前我遇到了这个问题，结果只是不依赖于 img.load。他手动触发加载事件的解决方法应该有效。

不过……

在这种情况下，开发人员应该在 CSS 中设置最大宽度或高度。事实上，在使用 javascript 之前先在 CSS 中做可以做的事情，这是一种很好的编程习惯。

此外，如果要继续使用此解决方案，var width 和 var height 应放在 var maxWidth 旁边的 if 语句之外，并在调用 $(this).width() 的任何地方使用（包括初始检查第 4 行）。现在代码不必要地创建一个新的 jQuery 对象来获取每次它应该存储和使用第一次检查的值的高度。

【讨论】：

我明白了，让我看看我是否可以插入那种优化。还要检查我的答案，这最终对我有用。