jquery - 使用 AJAX 触摸条件加载

Question

我正在尝试根据 isTouchDevice 是否为真有条件地加载 .js 文件。在向#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
  }
});