javascript - 基于 jQuery 的响应式设计——改变元素、不需要的预加载

Question

<img id="banner_desktop" src="http://hdwallpaper2013.com/wp-content/uploads/2013/02/Space-Background-Images-HD-Wallpaper-1080x607.jpg" />
<img id="banner_phone" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQgcQd5s4R1KaQAQM6qJ3cUtEb2sdWjNGOOfzzdEt3mMx0TAGqZ" />
Site content Site content Site content Site content Site content Site content Site content Site content Site content Site content Site content Site content Site content Site content Site content Site content Site content Site content Site content Site content Site content Site content Site content Site content Site content Site content Site content Site content Site content Site content Site content Site content Site content Site content

#banner_desktop
{
    width: 100%;
}

#banner_phone
{
    width: 100%;
}

$( window ).resize(function() {
    if ($('body').width() < 300)
    {
        $('#banner_desktop').hide();
        $('#banner_phone').show();
    }
    else
    {
        $('#banner_desktop').show();
        $('#banner_phone').hide();
    }
});

$( document ).ready(function() {
    $(window).trigger('resize');
});

http://jsfiddle.net/j9jnq/

这次我对响应式设计抱有“特别”的态度。在这里，横幅图像根据宽度而变化。但在这种情况下，两个图像都会预加载，当你在桌面上时，第二张图像不需要加载——在手机上，第一张不需要。这不仅是不必要的，而且还扰乱了视野，因为有些东西显示并消失了。但是我不能在加载 HTML 之前进行显示隐藏。我知道有媒体查询，但不可能对每个元素都这样做(我会用不同的尺寸来做这种方法)。

Answer 1

您可以通过 CSS 隐藏它们，然后在 JS 启动时决定显示哪个，或者强烈建议重新访问媒体查询。从长远来看，如果您使用 JS，您最终会做更多的工作并获得更少的性能。

事实上，与执行相同操作的潜在媒体查询版本相比，您的代码现在更难维护、更长且性能更差。