多个Facebook Elements,多个资源加载

时间:2015-09-16 07:57:05

标签: javascript facebook asynchronous sdk

如果您使用Facebook SDK在页面上使用多个Facebook-Element(例如按钮),则会多次加载来自Facebook的一些JS-Scripts。如果您在移动设备上浏览未缓存的内容,那就太烦人了。

示例:

<html>
<head>
    <script>
        window.fbAsyncInit = function() {
            FB.init({
                xfbml      : true,
                version    : 'v2.4'
            });
        };
        (function(d, s, id){
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) {return;}
            js = d.createElement(s); js.id = id; js.async=true;
            js.src = "//connect.facebook.net/de_DE/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    </script>
</head>
<body>
    <h1>Facebook Social Widget Testpage</h1>

    <h2>Like Buttons</h2>
    <div class="fb-like" data-href="//facebook.com/intouchmagazin/1" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></div><br><br>
    <div class="fb-like" data-href="//facebook.com/intouchmagazin/2" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></div><br><br>
    <div class="fb-like" data-href="//facebook.com/intouchmagazin/3" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></div><br><br>
    <div class="fb-like" data-href="//facebook.com/intouchmagazin/4" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></div>

    <h2>Posts</h2>
    <div class="fb-post" data-href="//www.facebook.com/FacebookDevelopers/posts/10151471074398553" data-width="500"></div>
</body>
</html>

如果您运行此代码并检查您的网络监视器,您将看到来自Facebook的300KB Js加载4(!)次。

有任何阻止这种想法的想法吗?

0 个答案:

没有答案