Ladda：微调器不显示答案

【问题标题】：Ladda: Spinner not displayingLadda：微调器不显示
【发布时间】：2014-03-18 14:34:13
【问题描述】：

我正在使用Ladda 在我的表单按钮上引入一些加载效果。见Ladda demo

我使用的效果是zoom-out。这有效，但微调器不显示。我有什么遗漏吗？

我的按钮：

<button type="submit" class="ladda-button" data-style="zoom-out" name="submit">
    <span class="ladda-label">Submit</span>
    <span class="ladda-spinner"></span>
</button>

我的 JS 脚本（取自here）：

var buttons = document.querySelectorAll( '.ladda-button' );

Array.prototype.slice.call( buttons ).forEach( function( button ) {

    var resetTimeout;

    button.addEventListener( 'click', function() {

        if( typeof button.getAttribute( 'data-loading' ) === 'string' ) {
            button.removeAttribute( 'data-loading' );
        }
        else {
            button.setAttribute( 'data-loading', '' );
        }

        clearTimeout( resetTimeout );
        resetTimeout = setTimeout( function() {
            button.removeAttribute( 'data-loading' );           
        }, 3000 );

    }, false );

} );

我正在加载的资源是：

ladda-themeless.min.css
ladda.min.js
spin.min.js

【问题讨论】：

我从未听说过 Ladda，所以我下载了演示并将 css 更改为 themeless.min.css。这些按钮现在是默认的浏览器按钮，并且微调器几乎不可见（因为它是白色的）。微调器真的不见了还是像我的情况一样不可见？
微调器不显示。即使我使用为按钮添加深色背景的 ladda.min.css，我也看不到微调器
当我查看页面源并点击按钮时，没有ladda-progress div被添加到DOM中。
看起来您的代码仅依赖于 Ladda 的 css，因为没有 Ladda.bind('.ladda-button')。微调器是用 javascript 插入的。你到底想做什么？你看过像 stop(); 这样的 Ladda 函数吗？
您有机会发布一个工作示例吗？当我使用 Ladda.bind('.ladda-button'); 而不是我的脚本时，一切都停止了工作

标签： javascript jquery

【解决方案1】：

我有这个并且它有效：

<!doctype html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="css/demo.css">
        <link rel="stylesheet" href="dist/ladda.min.css">
    </head>
    <body>
        <button type="submit" class="ladda-button" data-style="zoom-out" name="submit">
            <span class="ladda-label">Submit</span>
            <span class="ladda-spinner"></span>
        </button>
        <script src="dist/spin.min.js"></script>
        <script src="dist/ladda.min.js"></script>
        <script>
            Ladda.bind( '.ladda-button', { timeout: 2000 } );
        </script>
    </body>
</html>

如果要手动停止按钮，请使用documentation 中描述的功能之一

【讨论】：

我可能来晚了，但我认为我的咆哮很有用。这个答案实际上真的帮助了我，因为它正在工作。重要的是使用@Arvin 的答案在 ladda.min.js 之前首先包含 spin.min.js，并且当您将 HTML 元素放在页面上并在它们上调用 JavaScript 时，您需要包含元素之后的脚本，因为它们需要首先加载。否则，这些东西就行不通了！
请注意，微调器动画不适用于input 元素，仅适用于buttons。

【解决方案2】：

确保先包含spin.min.js，然后再包含ladda.min.js

【讨论】：

只是一个有帮助的小答案。

【解决方案3】：

我想添加另一个潜在的原因，我只是在玩了大约一个小时后才解决了这个问题。请注意，这并不是 OP 的具体情况，而是微调器不显示的原因。

如果微调器与按钮颜色相同，它将不可见！因此，如果您使用themeless.css 并且您的按钮是标准的btn-default，您将看不到微调器！

在这种情况下，更改 data-spinner-color 或按钮颜色是一种解决方法。

【讨论】：

【解决方案4】：

不要在按钮上设置任何文本属性，它将覆盖微调器

删除button.setAttribute( 'data-loading', '' );

【讨论】：