Question

许多专业设计的模板为主页添加了一种滑块形式（例如Slider Revolution，nivo等）。

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

因此，我想保留桌面计算机的滑块，但不保留手持设备的滑块。

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

然而，这仍然意味着滑块仍然会加载其中的所有对象，因为它们位于主HTML中，因此仍然会减慢页面加载时间和使用不必要的数据。

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

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

如果有人能就此提出建议我会非常感激，或者只是你对替代方案的看法？我的javascript知识很少，你可能已经收集了 - 我的专业知识主要是在html4和css2中，而我只是追赶！ - 所以如果我的词汇量不像在这样的论坛中那么精确，请接受我的道歉！

提前致谢。

Answer 1

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

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

这意味着滑块样式仅在窗口宽度至少为960px时使用。您可以使用它来隐藏滑块元素，但它仍然会为滑块功能加载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 );
    }
});

希望这不会太混乱！

仅当屏幕超过特定大小时才加载nivo型滑块

1 个答案: