如何提高jquery fancybox插件的性能

Question

我正在使用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更好的解决方案吗？

Answer 1

我建议：

1. 如果可能的话，让你的图像更小，少让质量或使用。PNG而不是其他格式（越小越好）
2. 创建合适大小的图像并删除缩放，只需使用background-image css属性并在背景中放置1:1的图像（假设缩放需要一些时间）
3. 当一切都完成时，使用类似的东西http://www.textfixer.com/html/compress-html-compression.php压缩html并使用https://csscompressor.net/最小化css
4. 请确保使用.js.min（您下载的js花式框的缩小版）

上面应该会让你在加载页面时有一些不错的速度提升。不错的动画！

Answer 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上的图像。这显著提高了性能。有人对我如何改进有什么建议吗？有更好的缓存图像的功能吗？事实上，我找到了一些选择，这是第一个有效的选择。还没有时间尝试其他人，很好奇其他人是否有缓存图像以稍后显示的经验。