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

Question

我今天刚刚遇到了最奇怪的错误。我不确定这是否是 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 中按预期执行

我该如何解决此奇怪的行为？

Answer 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");
});

Answer 2

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

但是......

在这种情况下，开发人员应该在 CSS 中设置 max-width 或 height。事实上，在使用 JavaScript 进行操作之前先使用 CSS 进行操作是一种很好的编程习惯。

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

Answer 3

感谢各位的贡献。堆栈上给出的先前答案 - 今天下午我显然找不到 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() 上执行。