javascript - 如何动态加载基础轨道？

Question

在我的 JavaScript 中，如果窗口具有特定宽度，请将 data-orbit 属性添加到我想要的 slider 中。这会在 $(window).resize() 和 $(function(){}) 上触发。

精简版...

   var ui = {
        mobile : function() {
            var i = 0;
            if($(window).width() <= 568) {
                this.resizeOffers();
            } else {
                this.mobileClear();
            }
        },
        resizeOffers : function() {
                $('#offers .inner').attr('data-orbit', "");

        },
        mobileClear : function() {
                $('#offers .inner').removeAttr('data-orbit');

        }
    }

如果您在窗口宽度符合条件的情况下加载页面，一切都会很好。如果您使用正常的窗口宽度加载页面，然后调整大小以适应媒体查询，显然 Orbit 没有加载 dom，因此没有 slider 动画或动态添加的 Orbit dom 元素。

我的问题是...

在文档加载后，如何让 Orbit 操作 dom？或者这不可能吗？

谢谢，
赛斯

Answer 1

考虑到这一点，您可以使用ajax加载orbit js，然后在dom准备好后启动它。

 $(document).ready(function(){

   //load the orbit JS
   $.ajax({
     url: 'js/foundation/foundation.orbit.js',
     dataType: 'script',
     success: function(){
       //initiate orbit
       console.log('loaded');
       $(document).foundation('orbit');
     },
     async: false
   });

});