【发布时间】：2018-06-06 00:30:36
【问题描述】：
问题：
所以我有一个简单的网页，其中嵌入了 youtube 视频和 1 个 facebook 帖子。除了重点之外，youtube 视频加载得很好，但是当我将嵌入的 facebook 帖子放在我的页面上时，“facebook 帖子”需要很长时间才能加载到页面上。更不用说它甚至没有在移动设备上加载。
我是如何获得嵌入式 Facebook 帖子的：
我只是去 facebook 上的一个帖子，然后点击右上角的箭头，他们有一个“嵌入帖子”选项，然后给我一个代码来放在我的网站上。它给了我这个。
<div id="fb-root"></div><script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script><div class="fb-post" data-href="https://www.facebook.com/sanandreasmovie/posts/816703421758294:0" data-width="300"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/sanandreasmovie/posts/816703421758294:0"><p>Live to tweet about it. #SANANDREAS #NowPlaying</p>Posted by <a href="https://www.facebook.com/sanandreasmovie">San Andreas</a> on <a href="https://www.facebook.com/sanandreasmovie/posts/816703421758294:0">Sunday, June 14, 2015</a></blockquote></div></div>
（索引）我的代码：
<!DOCTYPE html>
<html>
<head>
<title>Theme</title>
<meta charset="utf-8">
<meta name="viewport" content="width=1200, initial-scale=0.3">
<link rel="stylesheet" type="text/css" href="assets/bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/css/animate.css">
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome-4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header></header>
<!—embedded facebook post that loads terrible for some reason—>
<div class="eq-content fb-content”><!— this container has a large background image with the width of 2000px—>
<div class="dynamic-content-3">
<div id="fb-root"></div><script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script><div class="fb-post" data-href="https://www.facebook.com/sanandreasmovie/posts/816703421758294:0" data-width="300"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/sanandreasmovie/posts/816703421758294:0"><p>Live to tweet about it. #SANANDREAS #NowPlaying</p>Posted by <a href="https://www.facebook.com/sanandreasmovie">San Andreas</a> on <a href="https://www.facebook.com/sanandreasmovie/posts/816703421758294:0">Sunday, June 14, 2015</a></blockquote></div></div>
</div>
</div>
<footer> </footer>
<script src="assets/js/jquery-2.1.4.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
我目前无法提供示例链接，因为我遇到了服务器问题。但无论如何，我不认为真的需要一个例子。这个概念非常简单，您可以像我一样拥有一个带有大背景图像的 div，并在中间生成您嵌入的 Facebook 帖子，您将看到与我所看到的相同的内容。就像我说的那样，它很少在移动设备上加载，而且在我的 IMAC（桌面）上加载速度非常慢。
我不知道为什么 facebook 会在加载时间不合理的情况下做到这一点，但我能做的唯一可能的解决方案是可能有某种类型的 javascript 预加载器，这样我就可以加载先显示页面，再显示内容。这只是我的一个小想法，但任何其他解决方案/想法将不胜感激，谢谢。
【问题讨论】：
-
我网站上的 Facebook likebox 加载速度很慢，看起来它只有在页面加载完成后才开始加载？ （在您的情况下，可能是 Facebook CDN 问题，您访问 Facebook 时的加载时间如何？）
-
Facebook 它自己加载很好，它只是我网页上的嵌入帖子。不是网页本身，网页加载正常，但嵌入式帖子本身需要很长时间才能加载，甚至无法在移动设备上加载。
-
添加前请阅读标签说明。
-
如果您想要一个速度较慢的网站，请添加 Facebook 和 Twitter 提要。它是如何实施他们所有的第 3 方制衡的。
-
@cswl iv 已经尝试过了。
标签： javascript html css facebook