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

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

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.

del.icio.us Забобрить!

6 Comments so far

  1. ForJest June 9th, 2008 14:11

    Правильный ответ на “что делать” это:
    1. Минифицировать скрипт или отдавать его в gzip
    2. Выдавать кэширующие заголовки expired, ETag и т.п.
    3. Приращивать версию, когда нужно.

  2. Александр June 10th, 2008 00:18

    Правильный ответ - это смотреть по ситуации. Когда на сайте пол-миллиона pageviews в день, то gzip и headers не всегда спасают.

  3. Samolisov Pavel June 10th, 2008 09:51

    Большое спасибо за интересное решение, которое, что называется “в тему”.

  4. Виктор June 14th, 2008 15:32

    Было бы интересно узнать поподробнее

  5. Скачать фотографии >> цифровая фотография скачать на фотоблоге June 25th, 2008 21:11

    […]Вашему вниманию мы показываем подборку отличных блогов Рунета[…]

  6. Manryct June 28th, 2008 07:52

    Интересная тема, Спасибо!

Leave a reply