Ajax Russia : Аякс по-русски

Свежие новости из мира IT

Archive for the 'Javascript' Category

Javascript Lazy Loading

June 09th, 2008 | Category: Javascript

Сам недавно с подобным столкнулся. Написал джаваскрипт класс, который будет использоваться довольно редко. Размер у файла получился довольно большой и стало жалко траффика. Что делать?

А делать надо вот что - подгружать этот файл только тогда, когда это действительно надо. Сделать это довольно просто со следующим скриптом.

PLAIN TEXT
JavaScript:
  1. /** 
  2. *  Script lazy loader 0.5
  3. *  Copyright (c) 2008 Bob Matsuoka
  4. *  This program is free software; you can redistribute it and/or
  5. *  modify it under the terms of the GNU General Public License
  6. *  as published by the Free Software Foundation; either version 2
  7. *  of the License, or (at your option) any later version.
  8. */
  9. var LazyLoader = {}; //namespace
  10. LazyLoader.timer = {}; // contains timers for scripts
  11. LazyLoader.scripts = []; // contains called script references
  12. LazyLoader.load = function(url, callback){
  13.  
  14.     // handle object or path
  15.     var classname = null;
  16.     var properties = null;
  17.    
  18.     try {
  19.         // make sure we only load once
  20.         if ($A(LazyLoader.scripts).indexOf(url) == -1) {
  21.             // note that we loaded already
  22.             LazyLoader.scripts.push(url);
  23.             var script = document.createElement("script");
  24.             script.src = url;
  25.             script.type = "text/javascript";
  26.             $$("head")[0].appendChild(script); // add script tag to head element
  27.             // was a callback requested
  28.             if (callback) {
  29.                 // test for onreadystatechange to trigger callback
  30.                 script.onreadystatechange = function(){
  31.                     if (script.readyState == 'loaded' || script.readyState == 'complete') {
  32.                         callback();
  33.                     }
  34.                 }
  35.                 // test for onload to trigger callback
  36.                 script.onload = function(){
  37.                     callback();
  38.                     return;
  39.                 }
  40.                 // safari doesn't support either onload or readystate, create a timer
  41.                 // only way to do this in safari
  42.                 if ((Prototype.Browser.WebKit && !navigator.userAgent.match(/Version\/3/)) || Prototype.Browser.Opera) { // sniff
  43.                     LazyLoader.timer[url] = setInterval(function(){
  44.                         if (/loaded|complete/.test(document.readyState)) {
  45.                             clearInterval(LazyLoader.timer[url]);
  46.                             callback(); // call the callback handler
  47.                         }
  48.                     }, 10);
  49.                 }
  50.             }
  51.         }
  52.         else {
  53.             if (callback) {
  54.                 callback();
  55.             }
  56.         }
  57.     }
  58.     catch (e) {
  59.         alert(e);
  60.     }
  61. }

Использовать очень просто. Можно или просто подгрузить нужный файл:

PLAIN TEXT
JavaScript:
  1. LazyLoader.load('js/ajaxrussia.js');

Или погрузить с callbacks. Tо есть чтобы сразу после загрузки выполнить какую нибудь функцию:

PLAIN TEXT
JavaScript:
  1. LazyLoader.load('js/ajaxrussia.js', function(){
  2.     var test= new AjaxRussia('test');
  3. });

Для работы скрипта нужен Prototype.

6 comments

Хостим Javascript на Google

May 28th, 2008 | Category: API, Ajax, Google, Javascript, Script.aculo.us, jQuery

Вам никогда не приходила в голову мысль, как было бы здорово если все сайты хостили популярные джаваскрипт библиотеки на одном сервере? Только подумайте сколько траффика это бы всем сэкономило. Зашёл на один сайт, например Digg.com, браузер скачал ихний jQuery, потом перешёл на другой сайт, где используется тот же скрипт и уже скачивать ничего не надо. На Yahoo уже давно это делали для YUI, так а почему этого нету для других библиотек? Теперь есть!

Ребята из Google AJAX Libraries API объявили, что теперь будут хостить все популярные библиотеки на серверах Google. Больше не придётся думать о кэшинге, gzip-е, хостинге, трффике и тд. На данный момент поддерживаются Prototype, Script.aculo.us, jQuery, Dojo и MooTools. Read more

8 comments

Wolfenstein 3D на джаваскрипте

May 05th, 2008 | Category: Fun, Javascript

Все помнят Super Mario на джаваскрипте? Его создатель - Jacob Seidelin решил не останавливаться на достигнутом и написал онлайн версию Wolfendtein 3D с использованием Javascript, Canvas и немного аякса. Игра работает в Firefox 2.0.0.14, FF3 beta5, Safari 3.1.1 и Opera (9.27 и 9.50b).

Управление:
WASD или стрелки для движения.
x - открывать двери.
c - стрелять.

ИГРАТЬ

No comments

Starbox - рейтинг на Prototype

May 01st, 2008 | Category: Ajax, Javascript, Prototype, Tutorial

Все наверное не раз видели в интернете звёздочки для рейтингов. Это мог быть рейтинг для фоток, или рейтинг для статьи на блоге или ещё что нибудь. Сейчас расскажу как сделать такой рейтинг самому.

Использовать мы будем Starbox. Starbox это скрипт на базе Prototype и Scriptaculous, который позволяет добавлять рейтинги буквально парой строчек кода.

  • Установка
    Starbox требует Prototype 1.6.0.2 и Scriptaculous 1.8.1. Скачайте и подгрузите их в HEAD вместе с starbox.js и starbox.css. Картинки для звёзд надо распаковать в папку images.

    PLAIN TEXT
    HTML:
    1. <script type='text/javascript' src='js/prototype.js'></script>
    2. <script type='text/javascript' src='js/scriptaculous.js?load=effects'></script>
    3. <script type='text/javascript' src='js/starbox.js'></script>
    4. <link rel="stylesheet" type="text/css" href="css/starbox.css" />

  • Использование
    Сделаем пустой DIV для рейтинга, и запустим Starbox скрипт.

    PLAIN TEXT
    HTML:
    1. <div id="rating"></div>
    2. <script type="text/javascript">
    3.   new Starbox('rating', 0);
    4. </script>

  • Отправляем рейтинг на сервер
    У Starbox есть свой custom event - starbox:rated. Его мы будем ждать с помощью Prototype и посылать на сервер.

    PLAIN TEXT
    JavaScript:
    1. document.observe('starbox:rated', function(event){
    2.   function saveStar(event) {
    3.     new Ajax.Request('savestar.php', {
    4.       parameters: event.memo
    5.     });
    6.   }
    7. });

    event.memo содержит информацию на какую звезду кликнули и её рейтинг. Как обработать эти данные на сервере и записать в базу я объяснять не буду. Google вам в помощь ;)

Скачать Starbox и почитать подробнее об использовании можно на сайте разработчика.

1 comment

Введение в JSON

April 30th, 2008 | Category: Ajax, Javascript, PHP, Tutorial

AJAX JSONСреди форматов обмена данными, AJAX программисты часто выделяют JSON (JavaScript Object Notation, "джейсн"), как альтернатива языку XML, а именно потому, что XML больше язык разметки, чем носитель данных. JSON в свою очередь, легкий, человеко-читабельный, текстовый формат для хранения и передачи простых структурированных данных, а так же более комплексных объектов (массивов). В этом уроке мы рассмотрим простой пример формирования данных в JSON средствами PHP, а так же их получение и представление, с помощью JavaScript. Кто еще не понял, это продолжение серии уроков "AJAX PHP поиск" (XML, Prototype).
Read more

8 comments

« Previous Page — Next Page »