1

我编写了这段代码，通过根据分辨率加载更小分辨率的图片来加快页面加载速度……

window.onload = function() {
    bannerRes();
    function bannerRes() {
        var x = $(window).width();
        var y = $("#banner");
        if(x<=1920) {
            y.css('backgroundImage', 'url(team_banner_1920.jpg)');
        } else {
            y.css('backgroundImage', 'url(team_banner_2560.jpg)');
        };
    };
    $(window).resize(function() {
        bannerRes();
    });
};

但我不确定它是否值得使用，或者是否会出现任何问题。请问有什么意见吗？谢谢

4

3 回答 3

1

看起来您正在实施自适应图像解决方案。

W3C 中对这个话题进行了很多讨论，因此请注意，“专家”正在研究这个话题。

如果您在移动设备上向 iOS Retina 显示屏交付内容，情况会变得更加棘手。因为它们需要“双密度”。并有效地使您的图像维护加倍，并以 JS 代码维护跨设备的体验。

问题是，如果您必须在几年后为每一个可能出现的新设备更新代码，这可能会成为维护的噩梦。

最初的解决方案是使用@media-query，这将使您能够维护 CSS 中的图像，并简化您的 JS。

W3C 悬而未决的一个有趣话题是一个<picture/>标签，它可以在 dom 属性级别提供响应能力。从而避免了 css 和 JS 的足迹。但这在这一点上还有待观察。

希望有帮助。

于 2012-09-20T16:35:44.313 回答
0

您可以尝试使用 jquery 的动画调整图像大小...然后您将在服务器上只有一个图像，您可以相应地调整它的大小...

这个问题有关于如何做到这一点的答案......

于 2012-09-20T16:25:53.873 回答
0

只有你能判断它是否值得。

众所周知，谷歌将页面加载速度纳入其排名算法，所以如果这是您的担忧，那么它可能是有效的。

您的网站有很多流量吗？用户可能会有很多不同的屏幕分辨率吗？你能从你的网站统计中推断出类似的东西吗？即你有来自广泛分布的屏幕分辨率的点击吗？

所以，简而言之，它真的不可能在这里回答。如果您在网站上提供了更多细节，那么可能会进行推断，但即便如此，您最好还是自己尝试一些指标。

于 2012-09-20T16:21:35.393 回答