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

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

Archive for June, 2008

Подгружаем картинки с 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() соответственно эту куки сажать.

8 comments

Подгружаем картинки с 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 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

Yahoo! Design Stencil Kit 1.0

June 03rd, 2008 | Category: Yahoo, Дизайн, Релиз

На Yahoo Developer Network опубликовали Yahoo! Design Stencil Kit 1.0. Это ни что иное как шаблоны для элементов интерфейса пользователя. Всё что связано с интернетом: формы, кнопки, меню, табы, размер шрифта, размеры экранов, даже элементы интерфейса для айфона - всё есть в их релизе.

Думаю всем будет интересно взглянуть, даже дизайнерам.

Релиз можно скачать в следующих форматах:

6 comments