文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >在Meteor中100%准备好DOM之后才能加载脚本？

问在Meteor中100%准备好DOM之后才能加载脚本？
EN

Stack Overflow用户
提问于 2015-06-05 08:01:28
回答 1查看 614关注 0票数 0

我使用的是引导模板，它们的HTML和CSS / JS加载顺序如下所示：

代码语言：javascript
复制
<!DOCTYPE html>
<!--[if IE 8]>          <html class="ie ie8"> <![endif]-->
<!--[if IE 9]>          <html class="ie ie9"> <![endif]-->
<!--[if gt IE 9]><!-->  <html> <!--<![endif]-->
    <head>
        <meta charset="utf-8" />
        <title>Atropos - Responsive Multipurpose</title>
        <meta name="keywords" content="HTML5,CSS3,Template" />
        <meta name="description" content="" />
        <meta name="Author" content="Dorin Grigoras [www.stepofweb.com]" />

        <!-- mobile settings -->
        <meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=0" />

        <!-- WEB FONTS -->
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800" rel="stylesheet" type="text/css" />

        <!-- CORE CSS -->
        <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/font-awesome.css" rel="stylesheet" type="text/css" />
        <link href="assets/plugins/owl-carousel/owl.carousel.css" rel="stylesheet" type="text/css" />
        <link href="assets/plugins/owl-carousel/owl.theme.css" rel="stylesheet" type="text/css" />
        <link href="assets/plugins/owl-carousel/owl.transitions.css" rel="stylesheet" type="text/css" />
        <link href="assets/plugins/magnific-popup/magnific-popup.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/animate.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/superslides.css" rel="stylesheet" type="text/css" />

        <!-- REVOLUTION SLIDER -->
        <link href="assets/plugins/revolution-slider/css/settings.css" rel="stylesheet" type="text/css" />

        <!-- THEME CSS -->
        <link href="assets/css/essentials.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/layout.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/layout-responsive.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/color_scheme/orange.css" rel="stylesheet" type="text/css" /><!-- orange: default style -->
        <!--<link id="css_dark_skin" href="assets/css/layout-dark.css" rel="stylesheet" type="text/css" />--><!-- DARK SKIN -->

        <!-- styleswitcher - demo only -->
        <link href="assets/css/color_scheme/orange.css" rel="alternate stylesheet" type="text/css" title="orange" />
        <link href="assets/css/color_scheme/red.css" rel="alternate stylesheet" type="text/css" title="red" />
        <link href="assets/css/color_scheme/pink.css" rel="alternate stylesheet" type="text/css" title="pink" />
        <link href="assets/css/color_scheme/yellow.css" rel="alternate stylesheet" type="text/css" title="yellow" />
        <link href="assets/css/color_scheme/darkgreen.css" rel="alternate stylesheet" type="text/css" title="darkgreen" />
        <link href="assets/css/color_scheme/green.css" rel="alternate stylesheet" type="text/css" title="green" />
        <link href="assets/css/color_scheme/darkblue.css" rel="alternate stylesheet" type="text/css" title="darkblue" />
        <link href="assets/css/color_scheme/blue.css" rel="alternate stylesheet" type="text/css" title="blue" />
        <link href="assets/css/color_scheme/brown.css" rel="alternate stylesheet" type="text/css" title="brown" />
        <link href="assets/css/color_scheme/lightgrey.css" rel="alternate stylesheet" type="text/css" title="lightgrey" />
        <!-- /styleswitcher - demo only -->



        <!-- STYLESWITCHER - REMOVE ON PRODUCTION/DEVELOPMENT -->
        <link href="assets/plugins/styleswitcher/styleswitcher.css" rel="stylesheet" type="text/css" />     

        <!-- Morenizr -->
        <script type="text/javascript" src="assets/plugins/modernizr.min.js"></script>
    </head>
    <body><!-- Available classes for body: boxed , pattern1...pattern10 . Background Image - example add: data-background="assets/images/boxed_background/1.jpg"  -->

-- 这里有很多HTML --

代码语言：javascript
复制
    <!-- JAVASCRIPT FILES -->
    <script type="text/javascript" src="assets/plugins/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="assets/plugins/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="assets/plugins/jquery.cookie.js"></script>
    <script type="text/javascript" src="assets/plugins/jquery.appear.js"></script>
    <script type="text/javascript" src="assets/plugins/jquery.isotope.js"></script>
    <script type="text/javascript" src="assets/plugins/masonry.js"></script>

    <script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="assets/plugins/magnific-popup/jquery.magnific-popup.min.js"></script>
    <script type="text/javascript" src="assets/plugins/owl-carousel/owl.carousel.min.js"></script>
    <script type="text/javascript" src="assets/plugins/stellar/jquery.stellar.min.js"></script>
    <script type="text/javascript" src="assets/plugins/knob/js/jquery.knob.js"></script>
    <script type="text/javascript" src="assets/plugins/jquery.backstretch.min.js"></script>
    <script type="text/javascript" src="assets/plugins/superslides/dist/jquery.superslides.min.js"></script>
    <script type="text/javascript" src="assets/plugins/styleswitcher/styleswitcher.js"></script><!-- STYLESWITCHER - REMOVE ON PRODUCTION/DEVELOPMENT -->
    <script type="text/javascript" src="assets/plugins/mediaelement/build/mediaelement-and-player.min.js"></script>

    <!-- REVOLUTION SLIDER -->
    <script type="text/javascript" src="assets/plugins/revolution-slider/js/jquery.themepunch.plugins.min.js"></script>
    <script type="text/javascript" src="assets/plugins/revolution-slider/js/jquery.themepunch.revolution.min.js"></script>
    <script type="text/javascript" src="assets/js/slider_revolution.js"></script>


    <script type="text/javascript" src="assets/js/scripts.js"></script>


    <!-- Google Analytics: Change UA-XXXXX-X to be your site's ID. Go to http://www.google.com/analytics/ for more information. -->
    <!--<script>
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

        ga('create', 'UA-XXXXX-X', 'domainname.com');
        ga('send', 'pageview');
    </script>
    -->

</body>

​

底部有相当多的JS，只有在DOM 100%就绪之后才需要加载。

不幸的是，我很难找到正确的时间-我的页面仍然没有像演示那样工作-滑翔机没有出现，视差不工作，我相信很多事情也不工作，我没有注意到。我确信这是因为当Meteor加载JS (通常都在底部)时，一些DOM节点还不存在。

，这是我尝试过的：

注意:我还想将许多这些JS文件直接放到client/javascripts中，这样我就可以利用Meteor在生产中的自动缩小和捆绑功能。

1.我想，在呈现布局模板之后，DOM应该准备就绪，所以在呈现布局之后，我将将脚本标记附加到正文中，但这是行不通的。

代码语言：javascript
复制
Template.layout.onRendered(function() {

    console.log('layout rendered');

    var appendToHead = function(array){
        for (index in array){
            $('head').append(array[index]);
        };
    };

    var array = [
      // an array of all the script tags
      '<script type="text/javascript" src="assets/plugins/jquery-2.0.3.min.js"></script>',
      '<script type="text/javascript" src="assets/plugins/jquery.easing.1.3.js"></script>'
      // etc...
    ];

    appendToHead(array);

});
  1. 我尝试过将这个函数包装在Tracker.afterFlush()中，但这也不起作用。
  2. 我尝试过将这个函数放入main.js中，但这是行不通的。
  3. 我尝试过用Meteor.startup()包装这个，但是不起作用。
  4. 我甚至尝试过用$('document').ready()包装这个，但是它没有成功。
  5. 我要说的是，即使把所有东西都放到自己的包中也不能工作，因为包只能根据包对其他JS文件的依赖来控制包的加载顺序，但是不能根据DOM状态控制加载顺序，对吗？

顺便说一句，我把控制台日志放在每次尝试的旁边，这是它们被发射的顺序。

代码语言：javascript
复制
code inside Tracker.afterFlush has been fired
code inside main.js has been fired
code inside jQuery document.ready() has been fired
code inside layout.onRendered has been fired

部分困难在于流星的碎片化模板性质。一段JS代码(假设幻灯片)需要一个DOM元素才能运行。在呈现布局时加载代码是没有意义的，因为布局只是布局，不会有DOM元素。幻灯片所需的DOM元素包含在{{> intro}}、{{> photos}}和{{> videos}}模板中。

但是为这三个单独的模板编写加载幻灯片JS三次的代码也很繁琐.

如果有八个不同的第三方JS脚本正在使用呢？一个模板使用四个，另一个使用八个，另一个使用一个，另一个使用六个。必须一次又一次地定义要在每个单独模板的onRendered回调中加载哪些脚本，这将是非常痛苦的。

meteor
EN

回答 1

Stack Overflow用户

发布于 2015-06-05 10:14:28

您可以使用主模板的呈现()方法按给定顺序加载所需的JS脚本。假设您的主模板(或顶级模板)名为appLayout，那么您可以定义呈现()方法如下。

将所有JS文件放在流星应用程序的public\js文件夹中。

​

代码语言：javascript
复制
Template.appLayout.rendered = function() {
  if (!window.allScriptsLoaded) {
    var scripts = [
      // list of JS files to be loaded.
      'js/libs/jquery-2.1.1.min.js',
      'js/libs/jquery-ui-1.10.3.min.js',
      'js/plugin/jquery-touch/jquery.ui.touch-punch.min.js',
      'js/bootstrap/bootstrap.min.js'
    ];

    function loadNext() {
      var src = scripts.shift();
      if (typeof src === 'undefined')
        return;

      var s = document.createElement("script");

      s.setAttribute('src', src);
      if (s.addEventListener) {
        s.addEventListener("load", loadNext, false);
      } else if (s.readyState) {
        s.onreadystatechange = loadNext;
      }
      document.body.appendChild(s);
    };

    loadNext();
    window.allScriptsLoaded = true;
  }
}

​

这样，您就可以对文件的加载顺序进行精确的控制。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/30661370

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档