Question

我已经编写了这段代码，通过根据分辨率加载较小分辨率的图片来加快页面加载...

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();
    });
};

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

Answer 1

您似乎正在实施自适应图像解决方案。

关于这个主题的讨论正在W3C进行，所以请注意＆＃34;专家＆＃34;正在研究这个话题。

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

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

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

待审W3C的一个有趣话题是<picture/>标记，可以在dom归因级别提供响应能力。从而避免了css和JS两者的足迹。但目前还有待观察。

希望有所帮助。

Answer 2

只有你可以判断它是否值得。

众所周知，Google会将页面加载速度纳入其排名算法，因此，如果这是您关注的问题，那么它可能会有效。

您的网站是否有大量流量？用户可能会有很多不同的屏幕重写吗？你可以从你的网站统计数据中推断出类似的东西 - 也就是说，你是否从广泛的屏幕分辨率中获得了点击率？

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

Answer 3

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

这个question有关于如何做到的答案......

这个javascript值得用来加速页面加载吗？

3 个答案: