Сейчас многие сайты насыщены графикой в разных видах: аватары, иллюстрации к постам, галереи и тп.
Читатели блога «Клиентская оптимизация» как никто другой знают цену лишних запросов к серверу.
Количество обращений к серверу можно легко уменьшить с помощью техники пост загрузки изображений, которые не попадают в область видимости(первый экран). Т.е изначально будут загружаться только те изображения которые пользователь способен увидеть, остальные будут загружаться по мере скролинга страницы.
Так как я сторонник использования различных JavaScript фреймворков я приведу компоненты/расширения для одних из самых популярных: JQuery, Prototype и YUI. Если вы знаете похожие расширения для других библиотек, пожалуйста, пишите в комментариях и я добавлю их в список.
Добиться ускорения загрузки сайта можно с помощью следующих компонент:
- YUI — http://developer.yahoo.com/yui/examples/imageloader/imgloadfold.html
- JQuery — http://plugins.jquery.com/project/lazyload
- Prototype — http://www.bram.us/projects/js_bramus/lazierload/
DevMan подсказал класс для mootools — http://davidwalsh.name/mootools-lazyload
Список выстроен в таком порядке не случайно, появления одного плагина вызывало рождение другого — YUI -> JQuery -> Prototype.
Это очень простое решение, которое встраивается в вэбсайт всего менее чем за час(а то и 10 минут), но может принести вам значительную экономию трафика и увеличение скорости загрузки страниц, а главное снижение нагрузки на сервер.
Посмотреть как работает данная техника можно, например, на сайте mashable.com
via askdev.ru/blog
