javascript

Lazy Load – отложенная загрузка изображений

Одной из самых быстрой и простой оптимизации производительности сайта является уменьшение времени загрузки изображений. Минимизацию изображений можно сделать с помощью таких инструментов, как ImageOptim и TinyPNG, использование URI и спрайтов данных, а также использование отложенной загрузки изображений (lazyload).

Lazy-load или «ленивая» загрузка — это способ отображения контента на сайте, когда элементы загружаются по мере необходимости (асинхронно), а не сразу вместе с запрашиваемой страницей.

Когда браузер «видит» у элемента атрибут src, то делает запрос по указанному в нём адресу, что увеличивает время полной загрузки документа. Соответственно, чем больше внешних ресурсов синхронно подключается к странице, тем медленнее она загружается. Чтобы избежать множества одновременных запросов и оптимизировать скорость загрузки, используется техника lazy-load.

Подробнее

Вывод последнего твита на сайт

В последнее время становится очень популярным использование социальных сетей и их возможностей применительно к сайтам – вывод последних событий, новостей, комментариев, опросов и пр. В данной статье будет рассмотрено 2 способа вывода последних опубликованных сообщений из Твиттера на сайт – с помощью Javascript и с помощью PHP.

 

Вывод последнего твита с помощью Javascript

Добавление виджета

Для того, чтобы добавить ленту твиттера на сайт необходимо вставить код виджета. Для этого на странице “Виджеты” https://twitter.com/settings/widgets вашего твиттер-аккаунта надо создать новый виджет. Тут же можно выполнить и первоначальную настройку (установить параметры отображения твиттов, указать высоту, выбрать тему и пр.) и скопировать код виджета.

 

Код состоит из двух элементов: анкор с атрибутами (настройками виджета) и javascript-кода, который подгружает библиотеку твиттера.

 

Подробнее

Velocity.js – новый аннимационный плагин javascript

Velocity – это jQuery плагин, который повторяет $.animate(), обеспечивая более высокую производительность, делая Velocity даже быстрее анимации в CSS, также включает новые возможности по улучшению аннимации.

 

velocity

Совместимость

Velocity работает и в Internet Explorer 8 и в Android 2.3. Velocity использует функцию $.queue() из jQuery, и таким образом легко взаимодействует с функциями jQuery – $.animate(), $.fade(), и $.delay(). Поскольку синтаксис Velocity похож с $.animate(), то ни один участок вашего когда не нуждается в изменении.

Подробнее

CSS или JS анимация – что быстрее? Velocity.js!

Как получилось так, что Javascript анимация быстрее и лучше CSS переходов? И как стало возможным, что релизы медиа-мобильных сайтов у Adobe и Google конкурируют с нативными приложениями?

 

В этой статье изложен детальный разбор, почему библиотеки Javascript DOM анимации, такие как Velocity.js и GSAP более производительные, чем jQuery и CSS анимация.

 

Щелкните по картинке и оцените возможности Javascript:

 

velo2

 

jQuery

Начнем с основ: Javascript и jQuery были ложно объединены. Javascript анимация быстрая. jQuery замедляет анимацию . Все из-за того, что анимация не была целью проекта jQuery и в нем не заложен мощный производительный движок, хотя jQuery является достаточно мощной библиотекой:

 

Подробнее

Как скрыть E-mail на сайте

Как скрыть emailУ вас есть свой сайт и вы хотите указать адрес электронной почты на сайте для того, чтобы посетители могли легко связаться с вами и вместе с тем вы хотите, чтобы спам-боты не смогли распознать ваш e-mail на странице и спамер не смогли присылать спам вам на электронную почту.

 

Спам-боты используют обычные регулярные выражения (regular expession) в своей работе, чтобы распознавать адрес электронной почты на вашем сайте, если адрес опубликован в виде обычного текста, но вы можете обмануть ботов, скрыв ваш адрес электронной почты с помощью простых CSS и JavaScript методов. В этой статье мы их и рассмотрим.

Подробнее

Как отметить все чекбоксы

Иногда при работе с формой возникает ситуация, что для удобства пользователя надо одновременно выбрать все чекбоксы в форме. Для этого можно воспользоваться дополнительным чекбоксом (Отметить/Снять) и небольшим фрагментом javascript кода.

 

С помощью данного кода можно:

1. Отметить любое количество чекбоксов.

2. Отметить все чекбоксы щелкнув только по одному специальному чекбоксу.

3. Отметить и снять чекбоксы в один клик мыши.


Подробнее

Плавная прокрутка страницы вверх для сайта

Плавная прокрутка для сайта реализована на jQuery. Кнопка прокрутки появляется на странице, когда положение полосы прокрутки браузера достигает установленного в коде нужного значения (код приведен ниже), другими словами – кнопка появится только тогда, когда пользователь прокручивает страницу немного вниз.

Демо можно посмотреть тут или тут http://jsfiddle.net/x404/K5enj/, или промотайте эту страницу ниже.

 

Такая прокрутка реализуется в 3 шага:

1. Написание html-разметки кнопки.

2. Добавление css-стилей.

3. Написание javascript кода, который и отвечает за работу плавной прокрутки страницы вверх при нажатии на кнопку прокрутки.

 

Итак начнем:

Подробнее

Нестандартные шрифты на сайте. Cufon.

Когда возникает задача, что на сайте нужно использговать нестандартный шрифт, то можно пойти несколькими путями:

1. font-face метод  – для этого достаточно в CSS написать (данный метод не поддерживается в браузерах IE). Хотя метод достаточно распространненный, когда вы готовы закрыть глаза на невозможность отображения в Internet Explorer

@font-face {
  font-family:'Hagin Caps Medium';
  font-style:normal;
  font-weight:400;
  src:local('Hagin Caps Medium'), local('HaginCapsMedium'), url('HaginCapsMedium.otf') format('opentype');
}

 

2. Нарезать картинок с заголовками из jpg и вставлять вместо текста картинки.

 

3. sIFR – наиболее употребляемый на сегодняшний день, но его недостаток – требует наличия Flash-плагина. Хотя в нынешнее время это трудно назвать недостатком, но если есть инструмент, позволяющий обойтись без плагинов, то это не может не радовать.

 

4. Typeface.js

 

5. Cufon – cегодня это самый новый метод, который является достойной альтернативой sIFR и показывает превосходные результаты, который и будет рассмотрен.

Подробнее