这个JavaScript是否值得用来加快页面加载速度？

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中对此主题进行了很多讨论，因此请注意，“专家”正在调查此主题。

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

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

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

W3C悬而未决的一个有趣主题是<picture/>标记，该标记将在dom归因级别提供响应能力。 从而避免了CSS和JS的占用。 但这目前尚待观察。

希望能有所帮助。

Answer 2

只有您可以告诉它是否值得。

众所周知，Google将网页加载速度纳入其排名算法中，因此，如果您对此感到担忧，那么它可能会很有效。

您的网站流量很大吗？ 用户是否可能会有很多不同的屏幕分辨率？ 您可以从网站统计信息中推断出类似的信息吗？也就是说，您是否从各种各样的屏幕分辨率中获得了成功？

因此，总之，在这里不可能真正回答。 如果您在网站上提供了更多详细信息，则可以推断，但即使这样，最好还是自己尝试一些指标。

Answer 3

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

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