为什么当我在我的网页上加载一个“嵌入式”facebook帖子时，它的加载速度非常慢？
问题：
因此，我有一个简单的网页，嵌入了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预加载程序，这样我就可以先加载页面，然后显示内容。这只是一个小小的想法，但任何其他的解决方案/想法都将受到极大的赞赏，谢谢。
回答 1
Stack Overflow用户
发布于 2018-06-05 16:30:36
试试下面的链接。通常，嵌入式视频/帖子从主机抓取整个数据，因此加载时间。但是，使用一些JS，您可以修复这个问题(实际上是一个黑客)，这样您就可以创建一个div来显示视频的图像，用户应该认为它是实际的视频。单击视频div后，进行js调用，将div内容替换为实际的嵌入post。
这对于整个页面的加载时间有很大帮助，如果您想显示大量嵌入的帖子。
https://medium.com/@BenBillups/facebook-video-embeds-that-actually-work-57037f8cdcf3
干杯。:)
https://stackoverflow.com/questions/31395393
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号