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

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

Подгружаем картинки с Prototype

June 30th, 2008 | Category: CSS, Javascript, Prototype | Автор: Александр

Все читали статью Подгружаем картинки с jQuery? Довольно таки забавный скрипт. Захотел вставить его на свою страницу и вспомнил, что на ней совсем не jQuery, а Prototype. Что же делать? А просто взять и переписать скрипт для Prototype.

Работает новый скрипт точно также. Парсит CSS стили на странице, достаёт из них все картинки и подгружает их. Единственное что я не стал делать, это систему оповещения о статусе загрузки. Мне это не надо, но сделать это не сложно. Сравните мой код с плагином jQuery и будет ясно куда этот вставить.

PLAIN TEXT
JavaScript:
  1. var AjaxRussia = {};
  2. AjaxRussia.ImagePreloader = Class.create({
  3.  
  4.   initialize: function(){
  5.  
  6.     $A(document.styleSheets).each(function(sheet){
  7.       var cssPile = '';
  8.       var csshref = (sheet.href) ? sheet.href : 'window.location.href';
  9.       var baseURLarr = csshref.split('/');
  10.       baseURLarr.pop();
  11.       var baseURL = baseURLarr.join('/');
  12.       if (!baseURL.blank())
  13.         baseURL += '/';
  14.       if (sheet.cssRules) {
  15.         var thisSheetRules = sheet.cssRules;
  16.         $A(thisSheetRules).each(function(rule){
  17.           cssPile += rule.cssText;
  18.         });
  19.       }
  20.       else {
  21.         cssPile += sheet.cssText;
  22.       }
  23.      
  24.       var imgUrls = cssPile.match(/[^\(]+\.(gif|jpg|jpeg|png)/g);
  25.       if (imgUrls != null && imgUrls.length> 0 && imgUrls != '') {
  26.         $A(imgUrls).each(function(url){
  27.           var image = new Image();
  28.           image.src = (url.charAt(0) == '/' || url.match('http://')) ? url : baseURL + url;
  29.         });
  30.       }
  31.     });
  32.   }
  33. });

Использовать скрипт просто:

PLAIN TEXT
JavaScript:
  1. new AjaxRussia.ImagePreloader();

Только не надо этот код просто так писать на страницу. Иначе при каждой загрузке страницы CSS будет заново парситься. Я наверное буду вызывать AjaxRussia.ImagePreloader() только если у пользователя нету определённого куки. Ну а после работы AjaxRussia.ImagePreloader() соответственно эту куки сажать.

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

8 Comments so far

  1. Думаю June 30th, 2008 07:28

    1 - первый, гы :)

    2 - плиз, пиши почаще :( Хотя бы какие то мелкие заметки или около того :( Читаю тока тя, ты у мну в Яндекс лентах, и вот каждый день смотрю когда новый пост появиться, а его месяцами нету блин :(

  2. Александр June 30th, 2008 07:50

    Буду стараться :)

  3. Гвидон Маляров June 30th, 2008 09:36

    хых…а если в браузере отключены картинки, скажем для экономии трафа, то он все равно их загрузит?

  4. Александр July 1st, 2008 08:09

    Не пробовал

  5. shocker July 1st, 2008 16:15

    А что это дает? Выигрыш в скорости загрузки или что ?

  6. Александр July 1st, 2008 16:20

    посмотри прошлую статью про плагин jQuery, там написано зачем это нужно

  7. Владислав July 7th, 2008 14:27

    Спасибо Вам за то, что Вы продолжаете писатЬ!

  8. Лев July 13th, 2008 21:17

    Отличный пост, то что нужно, покрайней мере для меня)

Leave a reply