0

许多专业设计的模板包含一种形式的主页滑块（例如 Slider Revolution、nivo 等）。

尽管它们可能会响应，但我发现在移动设备上测试它们时，动画通常不是很流畅，并且会减慢加载和处理时间。在某些情况下，滑块中正在进行的动画似乎会干扰页面的显示和滚动，具体取决于手机的质量。

所以，我想为台式机保留滑块，但不为手持设备保留。

据我了解，如果滑块位于包含 div（例如 div#sliderWrap）中，如果我要使用 CSS3 媒体查询，我可以轻松地将滑块设置为不可见（显示：隐藏）。

但是，这仍然意味着滑块仍然会加载，并且其中的所有对象都在主 HTML 中，因此仍然会减慢页面加载时间并使用不必要的数据使用。

我想知道是否可以使用 iframe，然后仅当屏幕尺寸高于某个宽度（例如 960 像素）时才将滑块加载到框架中？我想这可以用 javascript/jquery 来完成。

所以，我想我的目标是在主页上有一个iframe，带有一点js说，如果页面大于960px，则将slider.html加载到iframe中。Slider.html 将包含通常出现在主页的 html 中的所有滑块信息，包括滑块需要运行的 javascript。

如果有人可以就此提出建议，我将不胜感激，或者只是您对替代方案的想法？正如您可能已经收集到的那样，我的 javascript 知识很少 - 我的专业知识主要是 html4 和 css2，而我只是在赶上！- 因此，如果我的词汇没有像这样的论坛中应有的准确，请接受我的道歉！

提前致谢。

4

1 回答 1

0

您可以使用 CSS 媒体查询来检查屏幕大小并相应地更改样式。例如，您可以使用：

@media only screen and (min-width : 960px) {
/* put slider code in here */
}

这意味着滑块样式仅在窗口宽度至少为 960 像素时使用。您可以使用它来隐藏滑块元素，但它仍会为滑块功能加载 JS 文件。您可以使用 jQuery 仅在窗口至少为 960px 时加载脚本，如下所示：

$(document).ready(function() {
    if ($(document).width() > 960) {
        var script = document.createElement( 'script' );
        script.type = 'text/javascript';
        script.src = "url of slider JS file";
        $("#sliderElement").append( script );
    }
});

希望这不会太混乱！

于 2013-08-26T03:13:08.320 回答