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将能够在您的网站加载后立即跟踪他/她访问您的网站。通过上面给出的答案，这只发生在单击共享按钮时（因为这会导致加载外部脚本）。

仅在用户点击项目时加载内容。

2 个答案: