Javascript 仅当用户单击项目时加载内容。

我在博客上有一个分享按钮的情况。你点击分享按钮，一个框会下拉，显示一些你可以分享文章的地方。它看起来很酷，但因为有很多数据是从各种服务器（facebook、twitter等）获取的，所以加载页面所需的时间比我希望的要长，而它在加载这些按钮时遇到了麻烦

如何（最好使用jQuery）使facebook等的按钮在用户单击共享按钮时加载，而不是在页面加载时加载，从而缩短页面加载时间

我一直想知道你是如何做到这一点的，但我从来没有真正需要这样做

编辑：为了便于参考，单击“共享”按钮时会执行此操作。这不是很复杂

$('.share').click(function(e) {

            $('.popup-share').fadeOut('100');

    if($(this).parents('.share-is-care').children('.popup-share').is(':visible')) {
        $(this).parents('.share-is-care').children('.popup-share').fadeOut('100');
    }
    else {
        $(this).parents('.share-is-care').children('.popup-share').fadeIn('100');
    }

}

---

如果正在加载动态内容，则可以使用AJAX函数将该内容动态添加到页面中，下面是将一些代码放入容器的示例：

$('.share').click(function(e) {
    if($(this).parents('.share-is-care').children('.popup-share').is(':visible')) {
        $(this).parents('.share-is-care').children('.popup-share').fadeOut('100');
    } else {
        $.get('http://url_to_get.whatever', function (data) {
            $(this).parents('.share-is-care').children('.popup-share').html(data).fadeIn('100');
        });
    }
}

如果只想在单击时向元素添加一些静态代码（如加载外部页面的iframe或其他），可以执行以下操作：

$('.share').click(function(e) {
    if($(this).parents('.share-is-care').children('.popup-share').is(':visible')) {
        $(this).parents('.share-is-care').children('.popup-share').fadeOut('100');
    } else {
        $(this).parents('.share-is-care').children('.popup-share').html('<iframe src="http://www.foo.bar/script.bam"></iframe>').fadeIn('100');
    }
}

$（'.share'）。单击（函数（e）{
if（$（this）.parents（'.share is care'）。children（'.popup share'）。is（':visible'））{
$（此）.parents（'share is care'）.children（'popup share'）.fadeOut（'100'）；
}否则{
$（this）.parents（'.share is care'）.children（'.popup share'）.html（'.fadeIn（'100'）；
}
}

如果您想拥有所描述的功能，那么您可能需要学习一些AJAX

本质上，您当前正在嵌入提供类似系统（Facebook、Twitter、Google等）的另一方的脚本。这会加载页面加载并使用各种类似按钮填充某些元素。现在，您需要延迟嵌入脚本的执行，直到发生某个事件（用户单击共享按钮）

有一篇长篇大论的博客文章，上面有一个类似于button的Facebooks示例代码，但所有站点的过程基本相同。请参阅（德语）

关键的一点是要有一个空的元素来保存按钮，这些按钮只有在事件发生后才被填充（在您的案例中单击）。例如：

<div class="popup-share"></div>

注意：对于性能更好的解决方案，请忽略获取HTML片段的AJAX请求。相反，请使用页面加载将其传输，但将其保留在JavaScript变量中。单击共享按钮时，将其注入空按钮保持元素。我没有使用此解决方案，因为我认为您的问题的答案中只有一个解决方案更容易理解。您可能想提出另一个问题，即如何使用页面加载传输HTML片段，并将其注入到某个事件中

还要注意的是，我从来没有真正测试过上面键入的代码。你可能会碰到打字错误

作为旁注（不是答案的一部分）：在站点上放置类似按钮以及与性能相关的内容时，请注意与隐私相关的问题。假设按钮的创建类似于以下代码：

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like layout="box_count" show_faces="false" width="55" font="arial"></fb:like>

---

一旦浏览器遇到该片段，它将从Facebook加载脚本。这样做时，您页面的地址将被传输，并且可能会从Facebook设置cookies。因此，如果有人仍然登录到Facebook，Facebook将能够在加载您的网站后立即跟踪他/她访问您的网站。答案如下：上面提到，这只发生在单击共享按钮时（因为这会导致加载外部脚本）.

这段代码你的共享内容是什么？我恐怕Javascript不是我的强项，所以AJAX对我来说是一个完全陌生的话题。D：我已经将共享代码添加到了主要帖子中。虽然有点混乱，但效果很好。@johnh你需要删除html中的脚本，这将阻止它们在开始加载。然后你可以使用

$.ajax（）

以获取内容。

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like layout="box_count" show_faces="false" width="55" font="arial"></fb:like>