Question

我正在尝试有条件地加载.js文件，具体取决于isTouchDevice是否为true。在向#slider添加一个类之后，它定义了显示的滑块类型以及每个类所需的选项。我无法弄清楚我做错了什么，我愿意接受有关如何实现这一目标的其他建议。

更新： https://github.com/woothemes/FlexSlider http://swipejs.com/

JS：

$(document).ready(function() {
function isTouchDevice() {
return (typeof(window.ontouchstart) != 'undefined') ? true : false;
};

if (isTouchDevice == true) {//Hook up Swipe

    $.ajax({
      type: "GET",
      url: "swipe.min.js",
      dataType: "script"
    }).done(function() { //Hook up Swipe
        $("#slider").addClass("swipe");
        var slider = new Swipe(document.getElementById('slider'));
    });
};

else {//Hook up Flexslider

    $.ajax({
      type: "GET",
      url: "jquery.flexslider.js",
      dataType: "script"
    }).done(function() { //Hook up Flexslider
        $("#slider").addClass("flexslider");
        $('.flexslider').flexslider({directionNav: false});
};
});

HTML标记：

<div id="slider">

     <ul class="slides">

         <li>
             <img src="images/loch-nevis.jpg" alt="" />
         </li>

         <li>
             <img src="images/snow.jpg" alt="" />
         </li>

         <li>
             <img src="images/iceland.jpg" alt="" />
         </li>

     </ul><!-- end slides -->

</div><!-- end slider -->

Answer 1

如何使用jQuery getScript方法？

if (isTouchDevice == true) {//Hook up Swipe
    $.getScript("swipe.min.js", 
        function() {
            $("#slider").addClass("flexslider");
            $('.flexslider').flexslider({directionNav: false })  // Removed errant ","
        }
    );
}

Answer 2

如果isTouchDevice工作正常，你可以试试lab.js或yepnope

lab.js示例：

if (isTouchDevice===true) {
  $LAB
    .script('swipe.min.js')
    .wait(function() {
      // do some stuff
    })
}

yepnope :(可能是错的，从未真正使用过yepnope）

yepnope({
  test:isTouchDevice,
  yep:'swipe.min.js',
  callback: function (testResult,key) {
    // do some stuff
  }
});

使用AJAX触摸条件加载

2 个答案: