【发布时间】：2017-09-14 19:38:57
【问题描述】：
背景：我正在创建我创建的网站的网页设计组合，我喜欢通过制作实时缩略图获得的效果，因为某些页面是动态的，无需打开每个页面就可以一目了然地显示出来页。此外，这很好，因为我投资组合中的这些网站不断更新，我不想继续拍摄该网站的新缩略图。
问题：优化代码的最佳方法是什么？目前，它在一个网站上加载了十几个网页。有没有一种简单的方法可以只加载网站的第一个视图？无论如何加载网站的比例更好，所以它不会加载网站的全屏视图并缩小它？如果可能的话，我想减少投资组合页面的加载时间。我也明白这可能是一种非正统的方式来做我想做的事情，如果有更好的方法来实现这个概念，我会喜欢任何建议。
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>
【问题讨论】：
-
您能做的只有这么多。 12 + 1 个页面 @ 平均 40 - 如果页面编码良好 -
http请求每个意味着超过 500 个 http 请求同时触发。我不会加载实时网站。只需加载静态缩略图，然后使用 JS 在缩略图悬停时发出 AJAX 请求。您可以在主站点的页脚预加载预览站点以提高性能，但这仅限于一个以限制滥用。但是，您可能会想出一个 hacky 方法来从 iframe 中链式预加载网站。 -
@I haz kode，非常真实。这可能是太多的要求是现实的。所以基本上，当他们悬停时，缩略图会加载动态视图，所以一次只有一个站点？
-
这或多或少的想法是，静态缩略图看起来就像实时页面，一旦用户悬停，实时预览就会加载到图像后面，然后图像就会消失。它应该非常平滑，抖动为 0，因为站点加载在框架内但在图像后面，并且由于图像几乎是相同的视图，因此当您开始滚动时，您不会注意到差异。但是，编写所有这些代码可能有点乏味。您可能想查看的另一个示例是它在 codepen 主页上的完成方式。
标签： javascript html css