问题:
所以我有一个简单的网页，其中嵌入了 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 预加载器这样我可以加载先显示页面，再显示内容。这只是我的一个小想法，但任何其他解决方案/想法将不胜感激，谢谢。
最佳答案
试试下面的链接。通常嵌入式视频/帖子会从主机获取全部数据，从而缩短加载时间。 然而，使用一些 JS 你可以解决这个问题(它实际上是一个 hack) 所以你制作了一个 div 来显示视频的图像，它应该对用户来说是实际的视频。 单击视频 div 后，进行 js 调用以将 div 内容替换为实际的嵌入帖子。
如果您想显示大量嵌入的帖子，这有助于缩短整个页面的加载时间。
https://medium.com/@BenBillups/facebook-video-embeds-that-actually-work-57037f8cdcf3
干杯。 :)
关于javascript - 为什么当我在我的网页上加载 “embedded” Facebook 帖子时加载速度非常慢？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31395393/