Трабла какая случилась - я решил выложить фотки/видео похода на дропбоксе, а сам пост с ними в блоге. Но если выложить все-все-пре-все (~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 (но об этом чуть позже).
Комментариев нет:
Отправить комментарий