使用 jQuery 缩放图像 - 浏览器缓存的方式答案

【问题标题】：Scaling images w/jQuery - browser cache in the way使用 jQuery 缩放图像 - 浏览器缓存的方式
【发布时间】：2010-11-05 08:40:06
【问题描述】：

要查看我的问题，请首先单击this link。然后点击this one。注意图像是如何被压扁的？（您可能需要通过寻呼机单击 a 才能看到它）。

我相信这是因为浏览器缓存。这是 javascript 做的工作：

$("#grid_slider").slider({
    value: 50,
    max: 100,
    min: 10,
    slide: function(event, ui) {
        $('ul#grid li').css('font-size',ui.value+"px");
    }
});

$("ul#grid li img").each(function() {
    var width = $(this).width() / 125 + "em";
    var height = $(this).height() / 125 + "em";
    $(this).css("width",width);
    $(this).css("height",height);
});

我希望您能够重现该问题。不知道需要做些什么来解决这个问题......正在考虑将这个功能全部取消。提前致谢。

【问题讨论】：

我看了你的页面，还是不明白问题所在。
“压扁”是什么意思？当我加载页面时，有一个闪烁，我看到图像很大，然后它们缩小。你指的是这个吗？
是的，我担心您无法重现该问题。看起来它在第一次加载时工作......然后当图像的顺序发生变化时，一些图像变得“挤压”。我想这有点难以解释......希望当我以外的其他人访问该页面时问题会出现。
哎呀，再试一次... 问题示例（错误，压扁的图像）：img99.imageshack.us/i/snapshot6.png 重新加载后（正确，预期结果）：img134.imageshack.us/i/snapshot7.png

标签： jquery jquery-ui caching

【解决方案1】：

我看到了你描述的问题。实际上，我认为这不是浏览器缓存，而是加载时间......我在其他一些网站上也看到了这个问题，所以我对此形成了一个（消息不灵通的）意见。

似乎主要问题是浏览器在知道图像大小之前就被询问了图像大小...您的脚本在$(document).ready 上触发，但这可能是在$("ul#grid li img") 完全加载之前，所以对于有些图片$("ul#grid li img").width() 可能不为人所知...

也许改用这个，看看是否有帮助？（将$().each 切换为$().load）

$("ul#grid li img").load(function() {
    var width = $(this).width() / 125 + "em";
    var height = $(this).height() / 125 + "em";
    $(this).css("width",width);
    $(this).css("height",height);
})

（不过完全是猜测……）

附录：刚刚阅读了有关加载功能的 jQuery 帮助，看来在调用它时已经加载的东西并没有运行......所以你可能必须同时做这两个（调用 $().each并设置$().load)...

【讨论】：

嗯……这很有道理。将考虑延迟调整大小...或在加载时对图像大小进行硬编码。