Увеличение скорости загрузки сайта, а также снижение нагрузки на сервер, используя отложенную загрузку изображений при помощи javascript т.н. Lazy Load

Для сайтов, на которых присутствует довольно большое количество картинок (особенно, если в браузер они выводятся “скопом”), отложенная загрузка может дать значительный выигрыш, как в скорости работы “для клиента”, так и в уменьшении нагрузки (и трафика) на сервер.

Вся “фишка” lazy load загрузки картинок в том, что те картинки, которые не видны пользователю попросту не загружаются. То есть, загрузка “нижних” картинок, не попадающих на экран происходит при перемотке страницы.

Lazy Load реализован с использованием различных фреймворков:

• JQuery - http://plugins.jquery.com/project/lazyload
• Mootools - http://davidwalsh.name/mootools-lazyload
• Prototype - http://www.bram.us/projects/js_bramus/lazierload/
• YUI - http://developer.yahoo.com/yui/examples/imageloader/imgloadfold.html

О замыканиях узнают, как правило, сталкиваясь с тем, что нужно “навесить” похожие обработчики на несколько элементов. Простой пример:

function setdisplay (elementID,vis) {
document.getElementById(elementID).style.display=vis; //'block' or 'none'
}
for (i=1;i<=4;i++) {
element = document.getElementById('element'+i); //#element1,#element2...
element.onmouseover = function (e) {
setdisplay('showhide'+i,'block');
}
element.onmouseout = function (e) {
setdisplay('showhide'+i,'none');
}
}

По идее при наведении курсора на элемент #element1 должен показываться showhide1, и скрываться после события onmouseout. =) Однако, i в данном случае будет иметь значение равное 5 =) для всех функций.

Вот тут-то и возникает вопрос, как “зафиксировать” текущее значение переменной.

element.onmouseover =
function(x) {
return function(e) { setdisplay ('showhide'+x,'block'); }
}(i)

Мы создаем дополнительную “внутреннюю” функцию, которая вызывается с параметром i.. А в самой функции используется локальная переменная x. Всё очень сложно может показаться только на первый взгляд.. ).

Открыв для себя такую возможность, я стал искать - наверняка я не первый, кто с этим столкнулся. Как выяснилось, такой прием (или сама функция) называется Замыканием в JavaScript.

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

Довольно объемная статья про замыкания в JavaScript:
http://www.fpublisher.ru/articles/web_technologies/type6/article70.htm
http://abramov.tv/2009/10/chto-takoe-zamyikaniya-v-php-i-javascript/

При работе с web-формами генерация содержимого страниц без перезагрузки с использованием технологии AJAX удобна и широко используется. Как быть, если требуется сохранить результат динамически сформированной страницы на локальный компьютер. Конечно, можно выделить нужное, “скопипастить” и сохранить, например в Word. Однако, для удобства пользователя можно предусмотреть возможность получения файла с данными с сервера (экспорт в документ Word, например). Задачу формирования документа в нужном формате пока пропустим (для эксперимента можно воспользоваться “болванкой” test.doc, например) и сразу перейдем к сохранению файла. Однако, не будем забывать, что файл должен генерироваться на основе данных формы и передаваться они будут методом POST (у GET-метода имеются существенные ограничения на длину запроса, что для формирования документов может быть критично)

Подводные камни Ajax-сохранения файла.

Особенность скачивания файлов с использованием Ajax-технологии в том, что “по умолчанию” файл, отдаваемый сервером, попадает туда, откуда был сделан запрос - в JavaScript. То есть после отправки запроса на сервер, браузер, получая ответ, не предлагает “стандартно” сохранить или открыть файл, продолжает выполнение заданного скрипта.

Как скачать файл Ajax-ом?

Итак, если сформулировать задачу более точно, то требуется отправить POST-запрос на сервер и сохранить полученный файл без перезагрузки страницы. Причем, учитывая информацию предыдущего параграфа, отправка запроса должна быть из “реальной” формы и производиться стандартными средствами браузера.

Вариант 0: отправляем данные AJAX, методом POST. Однако, обратно получаем не сам файл, а условный “ключ”, к которому привязываем специально созданный на сервере “промежуточный” файл.  Теперь переход по ссылке с нужным ключом и позволит сохранить нужный файл.

Вариант 1: динамически создаем нужную форму, размещаем в ней нужные поля и отправляем на сервер. Ответ получаем в виде окошка браузера с предложением открыть/сохранить файл.

Вариант 2 очень похож на предыдущий. С мааленьким изменением - всё действо происходит в отдельном IFRAME-элементе, который также формируется динамически. Делается это на случай, если браузер вместо попытки сохранить файл решит уйти с предыдущей страницы с заполненными данными.. В этом случае переход будет осуществлен во внутреннем документе, основная же страница перезагружена не будет.

Если быть более точным, то отправка и сохранение файла “не совсем AJAX” ( совсем не AJAX). Однако, без перезагрузки страницы.

AJAX скачать файл - подборка ссылок:
http://habrahabr.ru/blogs/personal/66772/ - вариант с сохранением временного файла
http://code.msdn.microsoft.com/AjaxFileDownload
http://www.filamentgroup.com/lab/jquery_plugin_for_requesting_ajax_like_file_downloads/

AJAX-загрузка файлов:

http://habrahabr.ru/blogs/jquery/50223/
http://vremenno.net/html-css/file-uploaders-overview/

JQuery - один из наиболее популярных JavaScript фреймворков.
1) просто http://www.rsdn.ru/article/inet/jQuery.xml
2) хорошая документация http://docs.jquery.com/Main_Page
3) куча готовых решений http://docs.jquery.com/Plugins
4) http://visualjquery.com.

Sencha http://www.sencha.com/ (Ext JS, EXT GWT, Sencha Touch, EXT Designer)
http://examples.extjs.eu/ - примеры для Ext JS

Prototype (prototype.js)MooTools
http://mootools.net
script.aculo.us - визуальные эффекты на prototype

YUI

http://habrahabr.ru/blogs/webdev/34918/
http://habrahabr.ru/blogs/webdev/35064/
http://habrahabr.ru/blogs/javascript/35597/ - опросы по javascript фреймворкам

Иногда встречается ошибка javascript … есть null или не является объектом.

Internet Explorer после такой ошибки останавливает дальнейшее выполнение сценария и (при соответствующей настройке) сообщает об ошибке желтым треугольником в левом нижнем углу.

Итак, в чем же дело.. Причем тут Null и объекты?

Очевидное объяснение - скрипт пытается обратиться к переменной, значение которой null,  или же это обращение к свойству переменной, которая не является объектом. Все-таки это ошибка javascript-программы.

Частые причины ошибки “есть null или не является объектом”

1. Попытка обратиться к несуществующему свойству объекта:
a=1; alert (a.property);

2. Попытка обратиться к несуществующему элементу массива:
a = []; alert (a[1]);

Internet Explorer в сообщении об ошибке указывает строку, в которой она обнаружена. Рекомендуется проверить все похожие обращения к переменным.

Если Вам известны другие причины появления ошибки  “null или не является объектом”- сообщайте в комментарии..

ps. В некоторых WYSIWYG-редакторах в ранних версиях часто встречались такие ошибки…

На многих сайтах можно встретить “красивое” увеличение картинок по клику, а также слайдшоу, перемещение между изображениями и некоторые другие функции. При этом особенно удачно иногда используется затемнение оставшейся части экрана. Получается lightbox (дословно что-то вроде “светлая коробка”).

Рассмотрим некоторые инструменты, с использованием которых можно легко разместить всплывающие изображения в lightbox у себя на сайте.

Собственно lightbox (ныне Lightbox 2)
Скрипт использует библиотеки prototype.js и scriptaculous.js Если не считать их, то размер скрипта довольно мал. http://www.lokeshdhakar.com/projects/lightbox2/

Lightview
Скрипт использует JavaScript-библиотеки prototype.js и scriptaculous.js
Сайт и демо: http://www.nickstakenburg.com/projects/lightview/

LightWindow
Также использует упомянутые библиотеки javascript. Вполне функционален.
http://stickmanlabs.com/lightwindow/

jQuery lightBox plugin
фактически плагин для Jquery с функционалом, аналогичным lightbox-оригиналу.
http://leandrovieira.com/projects/jquery/lightbox/

Highslide.js
Не использует дополнительных javascript-фреймворков. Полностью автономный скрипт с довольно внушительным функционалом. Позволяет внедрять не только изображения, но и страницы, HTML-код, flash. Удобно реализована работа с галереями изображений - предпросмотр
http://highslide.com/

FancyBox для JQuery
Похоже, лучшее решение для jquery - куча возможных вариантов анимации, работа с галереями изображений. В общем, смотреть примеры на
http://fancybox.net/

jsImageBox
очень компактный автономный скрипт без использования фреймворков
http://jsimagebox.ru/

Shadowbox.js
Решение может использовать как любой из нескольких популярных фреймворков, так и обходиться без них - нужный вариант можно загрузить с сайта
http://shadowbox-js.com/

jQuery (Tools) overlay
http://flowplayer.org/tools/overlay/index.html
Конечно, такое количество lightbox-скриптов не обязательно использовать на собственных сайтах. Вполне достаточно освоить один из вариантов. Хотя, знать о существовании альтернатив иногда бывает полезно.

Очень удобно дать возможность пользователю выбрать как будет выглядеть “превьюшка” изображения (уменьшенный вариант изображения… особенно в случае фиксированного разрешения), или отредактировать картинку “онлайн”, непосредственно в браузере.

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

Инструменты для редактирования изображений в браузере

JavaScript Image Cropper UI

Удобный инструмент для “редактирования” картинки непосредственно в браузере.

Demo: http://www.defusion.org.uk/demos/060519/cropper.php
Скачать: http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/

Статья о редакторах изображений (а-ля “paint online”, функционал у многих довольно широк)
http://www.coolwebmasters.com/web-applications/511-online-professional-image-editors-and-drawing-applications.html

Обрезка изображений в браузере - Resize crop cropui -

http://adw0rd.ru/2008/imgcrop/

http://odyniec.net/projects/imgareaselect/

Задача:

Используя javascript динамически формировать options у html элемента select.

Вариант решения с использованием свойства innerHTML:

html:
<select id="select1"><option value="val1">text1</option></select>

javascript:
myselect = document.getElementById('select1');
select1.innerHTML = '<option value="val2">text2</option><option value="val3">text3</option>';

Такое решение не везде работает  (mozilla firefox этот код обрабатывает. Opera и IE отказались напрочь)

http://support.microsoft.com/kb/276228 - с официального сайта Microsoft про innerHTML у Select. Там же варианты “обхода” этого бага.

Вариант 1 - использование js массива .options[] у элемента select:
select1.options[i] = new Option(i,i);

Вариант 2 - замена innerHTML у родительского элемента (т.е. HTML должен включать сам тэг select):
<div id="out1"><select ..> </select></div>
js: document.getElementById ('out1').innerHTML = '<select id="select1" name="select1"><option ...>...</option></select>';

ps. Все-таки наткнулся на решение на одном из лучших (на мой взгляд) ресурсов по web:
Javascript SELECT - динамические списки

UPD2 Вариант получения данных для формирования элемента select через ajax: Для передачи в JavaScript пар ID:значение используем responseText в формате JSON, значение которого вычисляем при помощи функции eval.


data = eval (transport.responseText);
for (i=0; i< =data.length-1; i++)
myElement.options[i]=new Option(data[i][1],data[i][0])
При этом скрипт должен отдавать массив в виде:
[
['1','название первого элемента'],
['2','название второго элемента'],
]

Prototype.js - один из популярных javascript фреймворков.
www.prototypejs.org - официальный сайт Prototype - там есть как документация, так и примеры.

http://www.prototypejs.org/learn/json -

Сразу скажу, что  “нормально” реализовать json на prototype у меня не получилось… -примеры с официального сайта “не пошли”.
prototype version 1.5.0

person = '/*-secure-\n{"name": "Violet", "occupation": "character"}\n*/'.evalJSON()
person.name;
//-> "Violet"

Такого рода конструкция работала только через eval():

var d='{ "name":"Violet","occupation":"character" }'; //json string
d = eval('(' + d + ')');
alert (d.name);

В итоге, вместо json принял решение использовать старый добрый innerHTML:

$("result").innerHTML= transport.responseText;

Возможно, дело в кривых руках (отсутствии документации, времени, мозгов ), однако, не исключено, что в “Last updated on May 1st, 2007″…

Да.. почему prototype.. Проект изначально построен с его использованием…

Довольно часто приходится сталкиваться с тем, что в сети появляются сайты как две капли воды похожие на оригиналы.. Конечно, обычно справедливость быстро торжествует, и такой сайт существует не очень долго..

Но сейчас не об этом.

Как защитить сайт от копирования?

0. Первое и самое главное, что следует усвоить: Если сайт можно просмотреть, то его можно и скопировать. Поэтому, вся так называемая защита от копирования, обычно помогает от пользователя неискушенного. Хотя, чаще всего, именно такие и хотят “скопировать” текстовую информацию или картинки с сайта.

Ну что ж.. А теперь перейдем к приемам, которые помогут защитить Ваш сайт от копирования:

1. Запрещаем кэширование страниц сайта. Это можно сделать несколькими способами:
Тэг HTML:
<meta http-equiv="Pragma" content="no-cache" />
или:
<meta http-equiv="Cache-Control" content="no-cache" />
Или
<meta http-equiv="no-cache" />
HTTP-заголовок (header):

Прочитать более подробно о кэшировании страниц

2. Запрещаем вызов контекстного меню в Internet Explorer
<body oncontextmenu="return false;" ondragstart="return false;">

3. Запрещаем выделение текста для копирования в Internet Explorer:

<script language="JavaScript">
document.onselectstart = returnfalse;
//запрещаем выделение
document.ondragstart = returnfalse;
//запрещаем перетаскивание
function returnfalse() {
return false;
}
</script>

4. пользуемся функциями escape | unescape
<script language="javascript">
mystring = "%u0412%u0441%u0442%u0430%u0432%u044C%u0442%u0435%20%u0442%u0435%u043A%u0441%u0442.";
document.write (unescape(mystring));
</script>

5. Для защиты изображений от копирования рекомендуется использовать так называемые водяные знаки или ватермарки (watermark) - наложение на изображение “полупрозрачного” изображения с названием своего сайта, или любого другого изображения, которое “идентифицирует” Вас, как владельца. Многие владельцы сайтов отказываются от копирования изображений с водяными знаками, на которых указан сайт “оригинал”.

6. Для защиты текста сайта от копирования  существуют сервисы, отслеживающие уникальность текста. Например CopyScape.com. Конечно же, по сути, сервис напрямую не защищает текст от копирования, однако, если в сети появится сайт с текстом, который “очень похож” на текст Вашего сайта, Вы об этом узнаете, и сможете сообщить “куда надо”