阻止图像请求 FB.getLoginStatus

Question

阻止图像请求 FB.getLoginStatus

5

Facebook的Javascript SDK有一个名为getLoginStatus的方法，当页面上的图像请求停滞（即浏览器长时间未收到200或404响应）时，该方法也会停止（并且不会触发传递给它的回调函数）。如果您等待了非常长的时间，直到浏览器最终关闭尝试获取图像的操作，SDK才会继续正常运行。可能正在发生什么，并且有没有办法防止它？当用户由于图像请求而无法登录或注册时，这非常不方便。请注意保留HTML标记。

- John O'Neill

这只发生在一个停滞的图像上吗？ - Emil Vikström

是的，这实际上就是出现这种情况的原因。一个图像请求被标记为“待定”超过一分钟 - 完全阻塞了 getLoginStatus 方法。 - John O'Neill

3

请确认一下，您是异步嵌入了JS SDK吗？而实际上被阻止的是该方法尝试发出的请求，而不是方法的调用本身？ - CBroe

1

你看过这个问题吗？ - Raidri

你有一个测试页面来重现这个问题吗？ - Roemer

@CBroe 是的，JS SDK是异步加载的，看起来确实是请求被阻塞了，而不是方法的调用。@Raidri 是的，我稍微研究了一下。不幸的是，禁用缓存/将第二个参数设置为“true”没有帮助（其他建议也没有）。@Flaxfield 还没有，但我会尽快设置一些东西！ - John O'Neill

3个回答

1

当您使用Facebook SDK网站上的初始化代码时，默认情况下，它希望等待页面完全加载后才运行某些事件，例如fbAsyncInit函数。

我不确定是否有“官方支持”的方法可以绕过此问题，但您可以自己加载JavaScript源并直接调用例程（即不在异步包装器中）。

这是一个基本示例，使用Facebook SDK初始化过程中出现了类似您提到的停顿，但使用此解决方法可以正常工作。

<html>
<head>
    <title>This is a test</title>
    <script src="http://connect.facebook.net/fr_FR/sdk.js"></script>
    <script language="javascript">
    <!--
    var loggedIn = false;
    var authenticated = false;

    FB.init({
        appId      : '{your app ID here}',
        xfbml      : true,
        version    : 'v2.0'
    });

    FB.getLoginStatus(function(response) {
        if (response.status === 'connected') {
            // the user is logged in and has authenticated your
            // app, and response.authResponse supplies
            // the user's ID, a valid access token, a signed
            // request, and the time the access token 
            // and signed request each expire
            var uid = response.authResponse.userID;
            var accessToken = response.authResponse.accessToken;
            loggedIn = true;
            authenticated = true;
        } else if (response.status === 'not_authorized') {
            // the user is logged in to Facebook, 
            // but has not authenticated your app
            loggedIn = true;
        } else {
            // the user isn't logged in to Facebook.
        }
    });

    function testLogin()
    {
        alert("Logged in: " + loggedIn + "\nAuthenticated: " + authenticated);
    }
    // -->
    </script>
</head>
<body>
Testing!
<button onclick="testLogin()">Test login?</button>
<img src="http://deelay.me/5000/ http://example.com/image.gif">
</body>
</html>

我不确定这会对您的网站集成产生什么影响，但我想象中不会有问题。如果有什么问题，我认为值得一试！

- Anthony

0

你有安装任何广告拦截器吗？我曾经遇到过类似的问题，使用 Adblock Pro 会导致一些问题。

- Steve Tauber

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- andyrandy · Accepted Answer

阻塞（HTML）：

<img src="..." />

非阻塞式（使用CSS）：

#someDiv {
    background-image: url(...) no-repeat;
    width: xxx;
    height: xxx;
}

非阻塞式（使用JS）：

var img = new Image();
img.onload = function () {
    document.getElementById('someDiv').appendChild(img);
};
img.src = "...";

尝试使用第二或第三个解决方案 - 还有许多JavaScript的预加载器插件，可以更轻松地异步加载大量图像，例如：http://thinkpixellab.com/pxloader/。另一个解决方案是先加载较小的图像，然后异步加载高分辨率图像。