有条件地显示基于媒体查询的内容

Question

我有一个网站，在桌面版本中，侧边栏显示包含10到20个小图像。 到目前为止，在移动设备上，这个侧边栏只是隐藏了display: none ，这是性能最低的解决方案，因为无论如何都会加载所有图像。

我现在想知道在移动设备上完全禁用侧边栏的最佳方法是什么（不使用单独的AJAX请求）。

我能想到的最佳解决方案如下：

• 将侧边栏的HTML代码写入JavaScript变量
• 通过使用JavaScript检查媒体查询来测试设备宽度（例如，使用Modernizr.mq左右）
• 如果此测试产生非移动设备，则将变量的内容写入DOM，例如使用innerHTML ， jQuery.append ， jQuery.prepend或类似

我知道RWD性能有时可能是一个非常复杂的主题，而且性能最高的解决方案通常并不明显。 那么有谁能想到比上面提到的解决方案更好的解决方案？

Answer 1

如果您不希望图像在移动设备上加载，而不是将图像放置为<img>标签，您可以将div设置为所需的宽度和高度，并将图像作为背景图像。 在你的css中，默认隐藏侧边栏。 然后，无论您认为哪个宽度超出移动范围，都可以使用媒体查询来显示侧边栏并在div中加载背景图像。

#sidebar {
    display: none;
}
#sidebar div#sidebar-img-1 {
    width: 100px;
    height: 100px;
}
/* ... */

@media only screen and (min-width: 480px) {
    /* display sidebar */
    #sidebar {
        display: block;
    }
    /* set background image for sidebar items */
    #sidebar div#sidebar-img-1 {
        background-image: url("sidebar1.jpg");
    }
    /* ... */
}

缺点是通过在样式表中放置内容，您可以交换语义性能。

Answer 2

我正在做一些关于如何做到这一点的研究，并由灯丝组进行了讨论： https ： //github.com/filamentgroup/Ajax-Include-Pattern/

似乎很容易设置。 它的工作原理类似于数据属性中设置的媒体查询。

因此，您不希望在移动设备上显示的侧边栏看起来像这样：

<aside href="..." data-append="articles/latest/fragment" data-media="(min-width: 40em)">Possible Mobile Content</aside>

因此，您的侧边栏只会出现在至少40帧（~640px）宽的屏幕上。 当然你也需要javascript文件并启动它，但这些看起来也很简单。