仅当屏幕大于特定尺寸时才加载 nivo 型滑块答案

【问题标题】：Load nivo-type slider only if screen is above certain size仅当屏幕大于特定尺寸时才加载 nivo 型滑块
【发布时间】：2013-08-25 23:11:48
【问题描述】：

许多专业设计的模板包含一种形式的主页滑块（例如 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，而我只是在赶上！ - 因此，如果我的词汇没有像这样的论坛中应有的准确，请接受我的歉意！

提前致谢。

【问题讨论】：

标签： javascript html css

【解决方案1】：

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

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

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

$(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 );
    }
});

希望这不会太混乱！

【讨论】：