使用jQuery缩放图像-浏览器缓存挡住了去路

要查看我的问题，请单击第一次。然后点击。注意图像是如何被压扁的吗？您可能需要通过寻呼机单击一个按钮才能看到它

我相信这是因为浏览器缓存。下面是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);
});

---

我希望你能重现这个问题。不确定需要做什么来修复此问题。。。我在考虑把这个功能全部去掉。提前谢谢。

我看到了您描述的问题。实际上，我不认为这是浏览器缓存，但加载时间。。。我在其他一些网站上也看到了这个问题，因此我对它形成了一种不知情的看法

看起来主要的问题是浏览器在知道图像的大小之前被询问图像的大小。。。您的脚本在$document.ready上启动，但这可能是在$ulgrid li img完全加载之前，因此对于某些图像，$ulgrid li img.width可能未知

也许用这个来代替，看看是否有帮助？开关$。每个开关用于$加载

不过完全是猜测

---

附录：刚刚阅读了关于load函数的jQuery帮助，似乎在调用该函数时，还没有运行已经加载的东西。。。因此，您可能必须同时调用$.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);
})