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

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

Archive for the 'jQuery' Category

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

June 23rd, 2008 | Category: CSS, Javascript, jQuery

Всем привет. Давненько не обновлял блог. Ездил в Питер на недельку, отдыхал, в интернет заходил редко да и то в основном на телефоне. Сейчас я снова в Гамбурге и постараюсь обновлять блог чаще, если только футбол не помешает :)

Вчера увидел интересный трюк, как подгружать картинки с jQuery. Все наверное сталкивались с такой ситуацией - надо показать какой нибудь модальный диалог, или lightbox. Так вот загружается этот lightbox, его уже видно, а какие нибудь картинки для бэкграунда ещё не загрузились. И пока они не загрузятся - выглядит такой lightbox тогда не очень красиво.

Решить такую проблему довольно просто. Надо чтобы браузер заранее загрузил все картинки, которые используются в CSS. Scott Jehl написал плагин для jQuery, который делает именно это.

PLAIN TEXT
JavaScript:
  1. /**
  2. * --------------------------------------------------------------------
  3. * jQuery-Plugin "preloadCssImages"
  4. * by Scott Jehl, scott@filamentgroup.com
  5. * http://www.filamentgroup.com
  6. * reference article: http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/
  7. * demo page: http://www.filamentgroup.com/examples/preloadImages/index_v2.php
  8. *
  9. * Copyright (c) 2008 Filament Group, Inc
  10. * Dual licensed under the MIT (filamentgroup.com/examples/mit-license.txt) and GPL (filamentgroup.com/examples/gpl-license.txt) licenses.
  11. *
  12. * Version: 3.0, 06.21.2008
  13. * Changelog:
  14. *  02.20.2008 initial Version 1.0
  15. *    06.04.2008 Version 2.0 : removed need for any passed arguments. Images load from any and all directories.
  16. *    06.21.2008 Version 3.0 : Added options for loading status. Fixed IE abs image path bug (Thanks Sam Pohlenz).
  17. * --------------------------------------------------------------------
  18. */
  19. jQuery.preloadCssImages = function(settings){
  20.     var settings = jQuery.extend({
  21.         statusTextEl: null,
  22.         statusBarEl: null
  23.     }, settings);
  24.    
  25.     var allImgs = [];//new array for all the image urls 
  26.     var k = 0; //iterator for adding images
  27.     var sheets = document.styleSheets;//array of stylesheets
  28.    
  29.     for(var i = 0; i<sheets.length; i++){//loop through each stylesheet
  30.         var cssPile = '';//create large string of all css rules in sheet
  31.         var csshref = (sheets[ i ].href) ? sheets[ i ].href : 'window.location.href';
  32.         var baseURLarr = csshref.split('/');//split href at / to make array
  33.         baseURLarr.pop();//remove file path from baseURL array
  34.         var baseURL = baseURLarr.join('/');//create base url for the images in this sheet (css file's dir)
  35.         if(baseURL!="") baseURL+='/'; //tack on a / if needed
  36.         if(document.styleSheets[ i ].cssRules){//w3
  37.             var thisSheetRules = document.styleSheets[ i ].cssRules; //w3
  38.             for(var j = 0; j<thisSheetRules.length; j++){
  39.                 cssPile+= thisSheetRules[j].cssText;
  40.             }
  41.         }
  42.         else {
  43.             cssPile+= document.styleSheets[ i ].cssText;
  44.         }
  45.        
  46.         //parse cssPile for image urls and load them into the DOM
  47.         var imgUrls = cssPile.match(/[^\(]+\.(gif|jpg|jpeg|png)/g);//reg ex to get a string of between a "(" and a ".filename"
  48.         var loaded = 0; //number of images loaded
  49.         if(imgUrls != null && imgUrls.length>0 && imgUrls != ''){//loop array\
  50.             var arr = jQuery.makeArray(imgUrls);//create array from regex obj   
  51.             jQuery(arr).each(function(){
  52.                 allImgs[ k ] = new Image(); //new img obj
  53.                 allImgs[ k ].src = (this.charAt(0) == '/' || this.match('http://')) ? this : baseURL + this;    //set src either absolute or rel to css dir
  54.                
  55.                 $(allImgs[ k ]).load(function(){
  56.                         loaded++;
  57.                         //send updates to status elements if applicable
  58.                         if(settings.statusTextEl) {$(settings.statusTextEl).html('<span class="numLoaded">'+loaded+'</span> of <span class="numTotal">'+allImgs.length+'</span> loaded (<span class="percentLoaded">'+(loaded/allImgs.length*100).toFixed(0)+'%</span>) <span class="currentImg">Now Loading: <span>'+allImgs[loaded-1].src.split('/')[allImgs[loaded-1].src.split('/').length-1]+'</span></span>');
  59.                     }
  60.                     if(settings.statusBarEl) {
  61.                         var barWidth = $(settings.statusBarEl).width();
  62.                         $(settings.statusBarEl).css('background-position', -(barWidth-(barWidth*loaded/allImgs.length).toFixed(0))+'px 50%');
  63.                     }
  64.                 });
  65.                 k++;
  66.             });
  67.         }
  68.     }//loop
  69.     return allImgs;
  70. }

Этот плагин парсит css и подгружает все найденные картинки. Поэтому когда картинки понадобятся - они появятся мгновенно.

2 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

7 comments

Календарь на jQuery

May 19th, 2008 | Category: jQuery

Наверняка многие знакомы с Datepicker из библиотеки jQuery UI. Разработчики из Filament Group решили сделать на базе кода из Datepicker - новый календарь. Получилось очень здорово. Можно выбирать как конкретную дату, так и промежуток времени. В этом случае появляется второй календарь.

Так же мне понравилось, что с выключенным джаваскриптом страницей можно всё равно пользоваться. На месте календаря появляются 2 input поля.

Посмотреть на скрипт в деле можно ТУТ.

No comments

jQuery 1.2.2

January 16th, 2008 | Category: Javascript, jQuery

jQuery logoБиблиотеке jQuery исполнилось 2 года и разработчики выпустили к этой дате новый релиз 1.2.2. Релиз очень интересный. Кроме различных исправлений багов есть несколько новых функций и улучшений. Read more

3 comments

jQuery on Rails

December 17th, 2007 | Category: Javascript, Ruby on Rails, jQuery

jRailsНаверняка есть фанаты jQuery, которые не хотят пользоваться Ruby on Rails из за того, что с рельсами в комплекте идут Prototype и Script.aculo.us. Теперь этому пришёл конец. И всё благодаря одному плагину - jRails. После его установки, все функции, которые раньше выдавали джаваскрипт, будут выдавать код jQuery.

Список поддерживаемых функций:

Prototype:

  • form_remote_for
  • form_remote_tag
  • link_to_remote
  • observe_field
  • observe_form
  • periodically_call_remote
  • remote_form_for
  • submit_to_remote

Script.aculo.us:

  • draggable_element
  • drop_receiving_element
  • sortable_element
  • visual_effect

RJS:

  • hide
  • insert_html
  • remove
  • replace
  • replace_html
  • show
  • toggle

Работу эффектов можно посмотреть по этой ссылке. Автор утверждает, что все эффекты работают идентично аналогам от Script.aculo.us.

А я попробую этот плагин в деле. Сделаю асинхронный запрос на сервер, получу оттуда время и покажу этот результат в DIV'e. Read more

No comments

Next Page »