加载特定脚本后如何显示某些内容？

Question

我有一个带有社交媒体分享按钮的小工具。 按钮的 API 需要几秒钟才能加载，选项卡有一个旋转图标，按钮可见但不可用。这显然很糟糕。

我现在正在使用下面的小脚本在页面加载后加载 API，我想保留它。

<script>
// Load the share API's once the entire page is loaded.
    $(window).bind("load", function() {
       $.getScript('js/share.js', function() {});
    });
</script>

但我也想隐藏社交媒体按钮 div，直到脚本中的 API 被加载，我该如何实现？

Answer 1

让你的 div 不显示，然后在脚本加载后使用你已经设置的匿名回调显示它。

HTML：

<div id="socialmedia" class="hide"></div>

CSS：

.hide {
    display: none;
}

JS：

$(window).bind("load", function () {
    $.getScript('js/share.js',
        function () {
            $('#socialmedia').removeClass('hide');
        }
    );
});