如何提高 jquery fancybox 插件的性能？答案

【问题标题】：How can I improve the performance of the jquery fancybox plugin?如何提高 jquery fancybox 插件的性能？
【发布时间】：2017-09-11 11:07:29
【问题描述】：

我正在使用 fancybox (http://fancyapps.com/fancybox/) 获取 PDF，将其拆分为单独的图像和 HTML 页面，并将其呈现为 fancybox 画廊。

在图库中混合了静态图像和带有图库内链接的 HTML 页面。为了让 fancybox 正确呈现它，我将所有画廊元素视为 iframe。

因此，每个图像都使用此 CSS 呈现在 HTML 页面上，以使图像成为 iframe 中的全屏背景：

html, body {width:1024px; height:768px; padding:0; margin:0; }
html {overflow: hidden; background: #d3d3d9; }
body {
background-image:url('images/slide_2.png');
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;
}

我的问题是，如何提高动画画廊过渡的性能？我在想也许找到一种方法来预加载画廊中的下一个项目？或者也许有办法自定义fancybox插件来提高动画性能？或两者？寻找建议。谢谢。这是我正在处理的示例的链接（为保护客户隐私而删除了链接），请注意幻灯片移出屏幕的动画有多笨拙。

或者，对于必须同时处理图像和 HTML 页面的画廊/幻灯片类型体验，是否有比 fancybox 更好的解决方案？

【问题讨论】：

标签： jquery html css fancybox

【解决方案1】：

我建议：

如果可能的话，让你的图片更小，不要让质量或使用 .PNG 代替其他格式（更小质量更高）
创建合适大小的图像并移除缩放，只需使用 background-image css 属性并在背景中放置 1:1 图像（假设缩放需要一些时间）
完成后，使用 http://www.textfixer.com/html/compress-html-compression.php 之类的东西来压缩 html 并使用 https://csscompressor.net/ 来最小化 css
确保使用 .js.min（您下载的 JS 花式框的缩小版）

以上内容应该可以为您在加载页面时提供一些不错的速度改进。不过动画不错！

【讨论】：

【解决方案2】：

我有一种预感，如果我可以提前加载图像而不显示它们，那么当稍后显示带有这些图像的幻灯片时，浏览器缓存将已经将图像保存在内存中。所以我找到了一个简单的 javascript 函数来预加载图像：

if (document.images) {
  img1 = new Image();
  img1.src = "image.jpg";
  img2 = new Image();
  img2.src = "image2.jpg";
}

来源：http://www.mediacollege.com/internet/javascript/image/preload.html

我在每个 iframe 上使用这个脚本来缓存它后面的 iframe 中的图像。所以在 iframe 1 上，我缓存了 iframe 2 上的图像。这显着提高了性能。有人对我如何改进这个有建议吗？缓存图像有更好的功能吗？我实际上找到了一些选项，这是第一个有效的选项。还没有时间尝试其他人，想知道其他人是否有缓存图像以供以后显示的经验。

【讨论】：