Question

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

我相信这是因为浏览器缓存。这是执行工作的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);
});

我希望你能够重现这个问题。不知道需要做些什么才能解决这个问题......正在考虑将这个功能全部整合在一起。提前谢谢。

Answer 1

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

看来主要的问题是，在知道这是什么之前，浏览器会被问到图像的大小......您的脚本会在$(document).ready上触发，但可能在$("ul#grid li img")完全开始之前加载，因此对于某些图像$("ul#grid li img").width()可能不知道...

也许使用它，看看是否有帮助？（为$().each）{/ 1>切换$().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帮助，看起来这个被调用时已经加载的东西没有运行...所以你可能要做两件事（调用{{1并设置$().each）...

用/ jQuery缩放图像 - 浏览器缓存的方式

1 个答案: