Если нельзя, но очень хочется, то нужно обязательно и ничего в мире не стоит того, чтобы делать из этого проблему!


Интересна Java? Кликай по ссылке и изучай!
Если тебе полезно что-то из того, чем я делюсь в своем блоге - можешь поделиться своими деньгами со мной.
с пожеланием
столько времени читатели провели на блоге - 
сейчас онлайн - 

суббота, 13 сентября 2014 г.

Скрипт lazy загрузки ленты событий для блога

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

Комментариев нет:

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