Javascript 优化实时网站缩略图的最佳方法是什么？

背景：我正在创建一个由我创建的网站组成的网页设计组合，我喜欢通过实时缩略图获得的效果，因为某些页面是动态的，不需要打开每个页面就可以一目了然地显示出来。此外，这是很好的，因为我的投资组合中的这些网站不断更新，我不想继续拍摄新的网站缩略图

问题：优化代码的最佳方法是什么？目前，它在一个网站上加载了整整12个网页。是否有一种简单的方法只加载站点的第一个视图？无论如何，要加载缩放更好的站点，这样它就不会加载站点的全屏视图并将其缩小？如果可能的话，我想减少公文包页面的加载时间。我也明白，这可能是一种非正统的方式来做我想做的事情，如果有更好的方式让这个概念付诸实践，我希望得到任何建议

CSS代码：

/***************************/
/***** LIVE THUMBNAILS *****/
.pa-live-thumbnail iframe {
  width: 1280px;
  height: 768px;
  opacity: 0;
  transition: all 300ms ease-in-out;
}
.pa-live-thumbnail {
  position: relative;
  -ms-zoom: 0.2;
  -moz-transform: scale(0.2);
  -moz-transform-origin: 0 0;
  -o-transform: scale(0.2);
  -o-transform-origin: 0 0;
  -webkit-transform: scale(0.2);
  -webkit-transform-origin: 0 0;
}
.pa-live-thumbnail-container {
  width: calc(1280px * 0.2);
  height: calc(768px * 0.2);
  display: inline-block;
  overflow: hidden;
  position: relative;
  border: solid 1px black;
}
.pa-live-thumbnail-container a {
  position:absolute; 
  top:0; 
  left:0; 
  right:0; 
  bottom:0;   
  width: 1440px;
  height: 900px; 
  z-index:10;
}
.pa-live-thumbnail-container:before {
  position: absolute;
  display: block;
  margin-left: auto;
  content: "Loading thumbnail...";
}

HTML代码：

<div class="pa-live-thumbnail-container">
  <div class="pa-live-thumbnail">
    <iframe src="http://pa-lib.com" onload="this.style.opacity = 1"></iframe>
    <a href="http://pa-lib.com"></a>
  </div>
</div>

我认为@I have kode的答案是获得我想要的效果的最佳选择。然而，为了简单起见，我意识到这不是一个好的选择，得到现场缩略图，现在已经回到静态图像。不过，当我回到这里时，我会把它存档。

你能做的只有这么多。12+1个页面@平均40个-如果页面编码良好-

http

请求每个意味着同时触发500多个http请求。我不会加载实时网站。只需加载静态缩略图，然后使用JS在缩略图悬停时发出AJAX请求。您可以在主站点的页脚处预加载预览站点，以提高性能，但这仅限于一个，以限制滥用。但是，您可能会想出一种黑客方法，从iFrame中链预加载站点。@I haz kode，非常正确。这可能是太多的要求是现实的。因此，基本上，当用户悬停时，让缩略图加载动态视图，以便一次只运行一个站点？这或多或少是一个想法，静态缩略图看起来与实时页面完全相同，一旦用户悬停，实时预览加载到图像后面，然后图像消失。它应该是非常平滑的，没有抖动，因为站点加载在框架内，但在图像后面，并且图像几乎是相同的视图，当您开始滚动时，您不会注意到差异。然而，编写所有这些代码可能有点乏味。另一个你可能想看的例子是它在codepen主页上的实现方式。