Как я могу улучшить производительность плагина jQuery fancybox?

Question

Я использую fancybox (http://fancyapps.com/fancybox/), чтобы взять PDF, разделить его на отдельные изображения и HTML-страницы и представить его как галерею fancybox.

В галерее есть смесь статических изображений и HTML-страниц с внутрикатегорийными ссылками. Чтобы заставить fancybox правильно отображать это, я рассматриваю все элементы галереи как iframe.

Так каждое изображение представлено на HTML странице с этим CSS, чтобы сделать изображение полного фона экрана в 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 для улучшения производительности анимации? Или оба? Ищите предложения. Благодарю. Вот ссылка на пример того, над чем я работаю (ссылка удалена для конфиденциальности клиента), обратите внимание, насколько неуклюжая анимация слайда, движущегося за кадром.

В качестве альтернативы, есть ли лучшее решение, чем fancybox для просмотра типа галереи/слайд-шоу, которое должно обрабатывать как изображения, так и HTML-страницы?

Answer 1

Я хотел бы предложить:

1. сделать ваши изображения меньше, если это возможно, немного качества Сдать или использовать .PNG вместо других форматов (меньше с более качественным)
2. Создания изображения в нужном размере и удалить масштабирование, просто используйте свойство css background-image и поместите изображение 1: 1 в фоновом режиме (при условии, что масштабирование занимает некоторое время)
3. Когда все сделано, используйте что-то вроде http://www.textfixer.com/html/compress-html-compression.php, чтобы сжать html и использовать https://csscompressor.net/, чтобы свести к минимуму css
4. Убедитесь, что вы используете .js.min (уменьшенная версия загруженного вами причудливого окна JS)

Выше должно быть сделано несколько улучшений скорости при загрузке страницы. Приятная анимация!

Answer 2

У меня была догадка, что если я смогу загружать изображения заранее, не показывая их, кэш-память браузера уже будет иметь изображение в памяти, когда слайд с одним из этих изображений будет показан позже. Так что я нашел простой яваскрипт функции для предварительной загрузки изображений:

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 1 я кэширую изображение, которое находится на iframe 2. Это заметно улучшило производительность. У кого-нибудь есть предложения по улучшению этого? Существуют ли лучшие функции для кеширования изображений? Я действительно нашел несколько вариантов, и это первый из них. У вас не было времени попробовать других, но любопытно, есть ли у других людей опыт кэширования изображений для отображения позже.