触摸AJAX条件加载

Question

我试图有条件地加载一个.js文件，这取决于isTouchDevice是否为true。然后在#slider中添加一个类，定义显示的滑块类型和每个滑块所需的选项。我不知道自己做错了什么，我愿意接受其他关于如何做到这一点的建议。

更新：https://github.com/woothemes/FlexSliderhttp://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
  }
});