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

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

Подгружаем картинки с 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 и подгружает все найденные картинки. Поэтому когда картинки понадобятся - они появятся мгновенно.

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

2 Comments so far

  1. Артём Курапов June 23rd, 2008 13:39

    Зато если пользователь ничего не сделает - траффик будет гнаться.

  2. Александр June 23rd, 2008 21:24

    Ну да, недостатки конечно есть. Но картинки закешируются и второй раз их скачивать не придётся.

Leave a reply