Question

我在Rails应用程序中有这个javascript块，启用了turbo-link：

<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/plug-ins/be7019ee387/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<script type="text/javascript" charset="utf-8">
    var ready = function() {
    setTimeout(function() {
      $('#table-products').dataTable();
    }, 100);
    };
    $(document).on('ready, page:change', ready);    
</script>

通常，我得到了.dataTable（）函数未定义的错误，刷新可以解决问题。但是，刷新并不总是令人愉快的，所以我添加了setTimeout 100ms来等待从CDN加载的js。

到目前为止，我在开发环境中没有看到任何问题，但我担心如果客户端很慢，js将在100ms内完成加载。我想知道是否有更好的解决方法，比如检查两个js文件是否已加载，类似于DOM的$（document）.ready。

谢谢！

Answer 1

实际上是gem for this。它非常易于使用，并带有引导样式选项。这比你的更优雅，因为它不依赖于CDN，而是利用Rails资产管道。

Answer 2

尝试

<head>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/plug-ins/be7019ee387/integration/bootstrap/3/dataTables.bootstrap.js"></script>

<script type="text/javascript" charset="utf-8">
$.holdReady(true);
var s = setInterval(function() {
  if ($.fn.hasOwnProperty("DataTable") 
      && typeof $.fn.DataTable === "function") {
        $.holdReady(false);
        clearInterval(s);
  };
 }, 1); 
$(document).ready(function() {
  $("#table-products").dataTable();
});  
</script>
</head>

jsfiddle http://jsfiddle.net/guest271314/RZVRL/

请参阅https://api.jquery.com/jQuery.holdReady/

Answer 3

我能找到的最优雅的方法是将所有cdn链接移动到布局页面中，以便加载和缓存所有库以获得整个用户体验。

等待来自CDN的Javascript加载

3 个答案: