5

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

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

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

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

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

4

2 回答 2

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

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

于 2013-03-12T23:08:36.903 回答
1

我只是在做一些关于如何做到这一点的研究，并被灯丝组遇到了这个问题： https ://github.com/filamentgroup/Ajax-Include-Pattern/

似乎很容易设置。它的工作原理看起来像是在数据属性中设置的媒体查询。

因此，您不想出现在移动设备上的侧边栏看起来像这样：

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

所以你的侧边栏只会出现在至少 40ems (~640px) 宽的屏幕上。当然，您还需要 javascript 文件并启动它，但这些看起来也相当简单。

于 2013-10-04T12:48:43.777 回答