Question

背景：我正在创建一个我已创建的网站的网页设计组合，并喜欢通过实时缩略图获得的效果，因为某些网页是动态的，很高兴在一瞥而无需打开每一页。此外，它很好，因为我的投资组合中的这些网站不断更新，我不想继续拍摄该网站的新缩略图。

问题：优化代码的最佳方法是什么？目前，它在一个网站上加载了十几个网页。有没有一种简单的方法只加载该网站的第一个视图？无论如何加载网站比较好，所以它不会加载网站的全屏视图并缩小它？如果可能的话，我想减少投资组合页面的加载时间。我也明白，如果有更好的方法让这个概念付诸行动，我可能会采用非正统的方式来做我想做的事情。我喜欢任何建议。

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>

Answer 1

我带着@I有kode的回答是获得我想要的效果的最佳选择。然而，为了简单起见，我已经意识到它不是一个很好的选择来获取实时缩略图并暂时回到静态图像。当我回到这里时，我会把它保存在档案中。

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

1 个答案: