javascript - 仅当屏幕超过一定尺寸时才加载 nivo 型 slider

Question

许多专业设计的模板都包含一种用于主页的 slider 形式(例如 Slider Revolution、nivo 等)。

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

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

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

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

我想知道是否可以使用 iframe，然后仅当屏幕尺寸超过特定宽度(例如 960px)时才将 slider 加载到框架中？我想这可以用 javascript/jquery 来完成。

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

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

提前致谢。

Answer 1

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

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

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

希望这不会太困惑!