javascript - 根据媒体查询有条件地显示内容

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");
    }
    /* ... */
}

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