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

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

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