Question

我正在努力加载响应/移动页面的最佳方法，然后我发现了一个jQuery插件，取决于屏幕宽度取消注释。我发现它很完美，因为我不需要额外的HTTP请求，对于移动用户来说它会更快。

但是，我偶然发现了一个问题：这个jQuery插件无法加载/渲染其他脚本。你可以在这个小提琴中看到我刚才：https://jsfiddle.net/g3f88q5k/

<div id="Test">
<!-- @media only all and (min-width:400px)
<script> Whatever </script>   
-->
</div>

它取消注释我想要的部分，但是使twitter成为按钮的脚本不起作用。

如果有任何方法可以使它发挥作用？

Answer 1

XHR（或JS代码本身）可以在if语句中生成，但在XHR的情况下，您将在多个脚本加载中获得性能损失。您最好将所有JavaScript放在一个缩小的文件中，然后立即下载。你可以让JS像媒体查询一样检测min-width等，但可能不容易维护。

Answer 2

尝试enquire.js。

通过match回调：

enquire.register("your screen media query here", {

    match : function() {
        //load your script here
    }
});

Answer 3

你可以扮演类似这样的角色

<html>
    <head></head>
    <body>

        <script type="text/javascript">
            var script = document.createElement('script');
            script.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js";
            script.onload = function() {
                console.log($); // now it's loaded
            };

            document.body.appendChild(script);
            console.log($); // doesn't work
        </script>
    </body>
</html>

我只是以jquery为例，但它应该适用于任何事情。

在脚本中加载脚本

3 个答案: