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

Question

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

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

因此，我想保留适用于台式机而不适用于手持设备的滑块。

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

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

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

因此，我想我的目标是在首页上放置一个iframe，并在其中添加一些js，如果该页面大于960px，则将slide.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 );
    }
});

希望不要太困惑！