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

Question

我在博客上遇到了一种情况，我有分享按钮。您单击共享按钮，会出现一个下拉框，显示您可以共享帖子的一些位置。它看起来很酷，但由于从各个服务器（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');
    }

}

Answer 1

如果您要加载动态内容，您可以使用 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');
    }
}

Answer 2

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

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

有一篇详细的博客文章，其中包含 Facebook 之类按钮的示例代码，但所有网站的过程本质上都是相同的。请参阅http://www.torbenleuschner.de /blog/119/ladezeit-facebook-like-button-per-jquery-nachladen/（德语）

关键点是有一个空元素来保存按钮，该元素仅在之后填充一个事件（点击您的案例）。例如：

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

那么您需要以与当前使用的方式相同的方式等待事件。但是我们假设它们包含在buttons-fragment.html 中，而不是在加载的页面上放置按钮创建脚本。

// Delay function's execution until click and call it exactly once
$('.share').one('click', function loadLikeButtons(e) {
    // Get the empty element
    var likeButtonContainer = $('.popup-share');
    // Fetch the code which contains the buttons (this is AJAX in the background)
    $.get('your-server.com/buttons-fragment.html', {}, function fillInLikeButtons(data){
        // The code in this inner function runs as soon as the code for the buttons is available / was successfully loaded.
        // The argument data contains the same HTML fragment that you are currently using to create the buttons
        // Place the buttons (or button initialization scripts within the still empty button holder
        likeButtonContainer.html(data);
    });
});

请注意，对于具有更好性能的解决方案，请忽略获取 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 的 cookie。因此，如果有人仍然登录 Facebook，一旦您的网站加载，Facebook 将能够跟踪他/她访问您的网站。根据上面给出的答案，这只发生在单击共享按钮时（因为这会导致加载外部脚本）。