Blog. Just Blog

Быстрый поиск

Введите фрагмент названия статьи для поиска

Загрузка видимых изображений (Lazy Load) на JavaScript

06.08.2012 | Категория: Web-мастеру и не только | Автор: ManHunter

Загрузка видимых изображений (Lazy Load) на JavaScript

"Lazy Load", "ленивая" или "отложенная загрузка" - особая технология работы с веб-страницами, когда загружаются только те изображения, которые находятся в поле зрения пользователя. Остальные картинки не загружаются до тех пор, пока пользователь не прокрутит страницу до их попадания в видимую область. При большом количестве изображений на странице такой трюк значительно повышает скорость загрузки сайта, а также экономит трафик пользователя и заметно снижает нагрузку на ваш сервер. Особенно это актуально при работе с сайтами на планшетных компьютерах и смартфонах.

Читать статью целиком »
Просмотров: 15382 | Комментариев: 12

Защита контента сайта от копирования

05.07.2012 | Категория: Web-мастеру и не только | Автор: ManHunter
Сразу же оговорюсь, что я категорически против использования на практике любых методов, описываемых в этой статье. Любой запрет только раздражает посетителей сайта и вряд ли кто-то захочет вернуться снова на страницу, которая, например, блокирует правую кнопку мышки или требует для просмотра текста включенный JavaScript. Максимум, что я признаю, это пассивная защита контента. Это не говоря о том, что любую защиту в случае реальной необходимости можно без особых проблем обойти. Но тем не менее, активная защита от копирования контента иногда встречается на некоторых сайтах. В этой статье я собрал методы активной защиты, которые встречал на практике.

Первый способ, самый простой. Подавление событий выделения текста, движения и клика мышкой, копирования и вызова контекстного меню путем блокировки правой кнопки мыши. Ставится обработчик, который не дает событию всплывать по иерархии DOM и сразу же возвращает флажок отмены:
  1. function nocopy(event) {
  2.     var event event || window.event;
  3.     if (event.preventDefault) { event.preventDefault(); }
  4.     else { event.returnValue false; }
  5.     return false;
  6. }
  7.  
  8. document.onmousedown nocopy;
  9. document.onmouseup nocopy;
  10. document.onmousemove nocopy;
  11. document.ondragstart nocopy;
  12. document.onselectstart nocopy;
  13. document.ontextmenu nocopy;
  14. document.oncopy nocopy;
Способ кроссбраузерный, но, к счастью, прекрасно обходится через выделение всего текста клавишами Ctrl+A и последующего его копирования. В Firefox через настройки обходится защита от блокировки контекстного меню.

Читать статью целиком »
Просмотров: 20300 | Комментариев: 27

Новый алгоритм получения Google PageRank

11.10.2011 | Категория: Web-мастеру и не только | Автор: ManHunter
Буквально на днях Google поменял алгоритм, по которому генерировалась ссылка для получения показателей Google PageRank. В результате этого отвалились многие сервисы, вспомогательные программы, сторонние тулбары, счетчики и еще бессчетное количество сеошного барахла. Мне было бы глубоко фиолетово на их проблемы, но у меня на сайте тоже используется система автоматического съема значений Google PR. Поэтому пришлось быстренько адаптироваться к новым условиям. Я установил себе гугловский тулбар, быстренько выпотрошил его и получил алгоритм генерации ссылки для получения Google PageRank. Вот как он выглядит на JavaScript:
  1. <script type="text/javascript">
  2.  
  3. // Программисты Google явно с юмором :)
  4. var HASH_SEED "Mining PageRank is AGAINST GOOGLE'S TERMS OF SERVICE. "+
  5.                  "Yes, I'm talking to you, scammer.";
  6.  
  7. // Расчет хэша строки запроса
  8. awesomeHash = function(a) {
  9.     var 16909125;
  10.     for (0a.lengthc++) {
  11.         b ^= HASH_SEED.charCodeAt(HASH_SEED.length) ^ a.charCodeAt(c);
  12.         b >>> 23 << 9;
  13.     }    
  14.     return '8'+hexEncodeU32(b);
  15. };
  16.  
  17. // Перевод числа в HEX-значение
  18. hexEncodeU32 = function(a) {
  19.     var toHex8(>>> 24);
  20.     b += toHex8(>>> 16 255);
  21.     b += toHex8(>>> 255);
  22.     return toHex8(255)
  23. };
  24. toHex8 = function(a) {
  25.     return (16 "0""") + a.toString(16)
  26. };
  27.  
  28. // Функция получения ссылки для запроса Google PR
  29. getPageRankLink = function(a) {
  30.     return 'http://toolbarqueries.google.ru/tbr?features=Rank'+
  31.            '&client=navclient-auto-ff&ch='+awesomeHash(a)+'&q=info:'+
  32.            encodeURIComponent(a);
  33. }
  34. </script>
Функция вызывается следующим образом. На входе подается ссылка на страницу, для которой требуется рассчитать Google PageRank, на выходе получаем ссылку, по которой можно узнать результат.
  1. <script type="text/javascript">
  2.  
  3. // Пример использования
  4. st='http://www.manhunter.ru/'
  5. alert(getPageRankLink(st));
  6.  
  7. </script>
Результат запроса к гугловскому серверу возвращается в виде строки, например, "Rank_1:1:2". Последняя цифра и есть искомое значение рейтинга страницы. Алгоритм можно без особого труда перевести на другие языки программирования.

Читать статью целиком »
Просмотров: 6280 | Комментариев: 12

Горизонтальный скроллер на JavaScript

17.08.2011 | Категория: Web-мастеру и не только | Автор: ManHunter

Горизонтальный скроллер на JavaScript

Захотел сделать горизонтальный скроллер для фотогалереи, естественно, без использования всяких сторонних скриптов. Условие: кроссбраузерность, валидная верстка и стандартные стили, поддержка колесика мыши. Начнем с верстки:
  1. <div class="scroller_container">
  2.   <div class="scroller_navigate"><img src="images/left.gif" alt=""></div>
  3.     <div class="scroller_window" id="scroller_window">
  4.       <div class="scroller_row" id="scroller_row">
  5.         <div id="scroller_rule">
  6.           <!-- список превьюшек в линейке скроллера -->
  7.           <a href="#"><img src="..." width="150" height="100" alt=""></a>
  8.           <a href="#"><img src="..." width="150" height="100" alt=""></a>
  9.           <a href="#"><img src="..." width="150" height="100" alt=""></a>
  10.           <a href="#"><img src="..." width="150" height="100" alt=""></a>
  11.         </div>   
  12.       </div>
  13.     </div>
  14.   <div class="scroller_navigate"><img src="images/right.gif" alt=""></div>
  15. </div>
Дополнительный элемент scroller_rule приходится использовать, чтобы получить полную ширину всей полосы скроллера с превьюшками. Элементы scroller_navigate содержат левую и правую стрелочки для прокрутки. Теперь надо создать таблицу стилей для оформления. "Окно" скроллера должно быть фиксированного размера и без полос прокрутки, а полоса скроллера будет перемещаться относительно этого окна, за счет этого будет достигаться эффект плавной прокрутки. Для большей красоты я взял фоновый рисунок, имитирующий фотопленку.

Читать статью целиком »
Просмотров: 11419 | Комментариев: 21

Функции base64 на JavaScript

23.06.2011 | Категория: Web-мастеру и не только | Автор: ManHunter
По умолчанию в JavaScript отсутствуют штатные функции преобразования данных по алгоритму Base64. Ниже приведены две функции для base64-кодирования и декодирования на JavaScript. Их удобно использовать при передаче различных данных через AJAX или через web-формы, а также для хранения в исходном коде бинарных данных, например, зашифрованных строк.
  1. // Функция кодирования строки в base64
  2. function base64encode(str) {
  3.     // Символы для base64-преобразования
  4.     var b64chars 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefg'+
  5.                    'hijklmnopqrstuvwxyz0123456789+/=';
  6.     var b64encoded '';
  7.     var chr1chr2chr3;
  8.     var enc1enc2enc3enc4;
  9.  
  10.     for (var i=0i<str.length;) {
  11.         chr1 str.charCodeAt(i++);
  12.         chr2 str.charCodeAt(i++);
  13.         chr3 str.charCodeAt(i++);
  14.  
  15.         enc1 chr1 >> 2;
  16.         enc2 = ((chr1 3) << 4) | (chr2 >> 4);
  17.  
  18.         enc3 isNaN(chr2) ? 64:(((chr2 15) << 2) | (chr3 >> 6));
  19.         enc4 isNaN(chr3) ? 64:(chr3 63);
  20.  
  21.         b64encoded += b64chars.charAt(enc1) + b64chars.charAt(enc2) +
  22.                       b64chars.charAt(enc3) + b64chars.charAt(enc4);
  23.     }
  24.     return b64encoded;
  25. }
Функция декодирования, соответственно, выполняет обратное действие. Дополнительно в ней перед декодированием выполняется очистка исходной строки от символов, которые не относятся к base64-символам. Поэтому функции base64decode можно передавать не цельную строку, а, например, разделенную переносами строк или пробелами для удобства восприятия.

Читать статью целиком »
Просмотров: 15151 | Комментариев: 14

Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2021
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.18 сек. / MySQL: 3 (0.0708 сек.) / Память: 5 Mb
Наверх