Трабла какая случилась - я решил выложить фотки/видео похода на дропбоксе, а сам пост с ними в блоге. Но если выложить все-все-пре-все (~50 файлов на пост), то при загрузке поста дропбокс грузит только первые 30 фоток/видяшек, а потом перестает отдавать контент. Странно, ведь проплатил жеж. Выйти из ситуации решил так же, как делает это фейсбук со своей лентой. Lazy loading. Сразу грузится какой-то блок инфы, а в конец ее добавляется дивчик (назовем его next). При скроле, когда дивчик становится видимым - грузится очередная порция инфы и так пока не загрузится все. Так же я сделал превьюшку для видяшек, чтобы видео не грузилось сразу, а по клику (оказывается это тоже вешает dropbox).
Результат можно посмотреть вот тут.
Скрипт берем вот тут. Он сейчас сырой, в плане читабельности. Решил выложить, потому как потом забуду :)
Работает он приблизительно так. В блоге в режише html надо выложить приблизительно ткой код.
<style>
.content_part .media {
width:70%;
}
</style>
<script src="https://dl.dropboxusercontent.com/u/11842832/Blog/jquery/jquery-2.1.1.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/11842832/Blog/jquery/loader.js"></script>
<script>
var content = [
{text:'Недавно я на все плюнул (спасибо жене моей, что помогла в этом, поддержав) и пошел в одиночный поход в Карпаты. Было к ряду 3 выходных...',
media:'https://dl.dropboxusercontent.com/u/11842832/Blog/Podobovets/blog/1.jpg'},
{text:'Утро было магически-странным. Все не так как обычно. 7 утра. Поезд едет очень медленно. Света мало, за стеклом туман. За туманом горы...',
media:'https://dl.dropboxusercontent.com/u/11842832/Blog/Podobovets/blog/2.mp4'},
{text:'В городе сонного меня облепили водители. Спасибо не надо! Пытаясь понять, что мне делать дальше (плана-то нет) я решаюсь выйти за пре...',
media:'https://dl.dropboxusercontent.com/u/11842832/Blog/Podobovets/blog/3.jpg'},
];
initFeed("https://dl.dropboxusercontent.com/u/11842832/Blog/jquery/play.png", window, 0.7, content);
</script>
<div id="feed_container">
</div>
Если media имеет расширение jpg - картинка отобразится без иземения, если mp4 - то из той же папки прочитается одноименная картинка с расширением jpg и отобразится в качестве превьюшки, по клику на нее загрузится видео тег. Если проскролить так, чтобы видеотег спрятался - видео перестанет грузится и опять отрисуется кликабельная превьюшка. Так же можно обработать docs.google.com и youtube.com видеоролики, а так же панорамы сгенерированные тулой Pano2VR (но об этом чуть позже).

Комментариев нет:
Отправить комментарий