1

我目前正在构建一个实践响应式网站，我正在做的是使用一个现有的网站，使用 twitter bootsrap js 和 css 构建它，这意味着它将完全响应移动设备。

问题是网站上有一些大型轮播和图像。理想情况下，我只想完全删除某些元素，例如轮播，而是将轮播中的选项作为标准列表菜单。

似乎主要选项是display:none基于媒体查询，但我开始预见如果整个桌面站点仍将在移动设备上加载，我将遇到加载时间的大问题，只有隐藏的元素。

有没有办法根据浏览器大小完全排除 html？如果有人有任何好的链接或文章，那就太好了。甚至只是意见，关于是否真的需要排除 html。

谢谢

4

4 回答 4

2

您可以考虑存储大量 JSON 编码的数据，然后像这样创建元素并按需加载它们

var heavyImage = new Image();
heavyImage.src=imageList[id];

然后您可以将图像元素附加到所需的块。根据我在手机方面的经验，这比<img>通过 AJAX 请求更强大，因为 AJAX 有时可能会很慢。

您还可以使用此方法“预取”图像（例如目前与可见相邻的 2-3 个图像），从而改善用户体验。

于 2013-01-22T12:15:10.600 回答
2

首先，很高兴看到尽管您在谈论display:none;您实际上仍然希望显示没有图像的花里胡哨的内容。你干得好。

我接下来要看的是，如果您不想为移动设备加载图像，那么为什么要为较大的站点添加它。如果图像没有提供功能，帮助更好地解释内容，那么为什么不把它也放到桌面大小呢？

如果它确实有助于讲述一个故事，那么您可以包含图像和一些流行的图像服务，例如自适应图像、hiSRC或PictureFill，它们将首先提供图像的移动版本，并在更高的视口处替换为更大的图像（但请记住，没有带宽测试）。

最后，如果您确实想提供一些不同的内容，那么请采纳 fire 的建议，在 ajax 中包含更多内容。来自 Filament 组的South Street 工具箱可以帮助您，特别注意 AjaxInclude 模式（它也有指向图片填充的链接）。

于 2013-01-22T12:17:34.700 回答
1

您可以通过 AJAX 引入重元素，这样它们最初就不会位于页面上，从而使其加载速度更快。仅当屏幕尺寸大于 X 时，您才可以决定执行 AJAX 调用。

于 2013-01-22T11:57:05.157 回答
0

如果你想你可以使用visibility:hidden，或者如果你使用 jQuery，你可以使用

$(element).remove() //to remove completely
$(element).hide() //to hide 
$(element).fadeOut(1) //to fadeout
于 2013-01-22T11:58:06.670 回答