Мы распрацавалі рашэнне, якое аўтаматызуе векавая задача папярэдняй загрузкі малюнкаў у вэб-прыкладаннях. Ён выкарыстоўвае JavaScript і запакаваная ў JQuery плягін, але канцэпцыя можа быць лёгка перанесены на іншыя бібліятэкі або стары добры Javascript, а таксама.
Вэб-дадаткі, як правіла, уключаюць мноства фонавых малюнкаў для элементаў і заяўляе, што не ў сілу пры загрузцы старонкі. У традыцыйным вэб-прыкладанняў гэтыя вобразы выкарыстоўваюцца для перакульвання станаў для спасылкі і кнопкі, але Ajax прыкладанняў пашырылі пералік, уключыўшы ў малюнка для ўбудаваных паведамленняў, падказкі, уключаецца змест, накладка на панэль, і нават цэлыя старонкі з ўтрымання, якія патэнцыйна могуць ветру ў інтэрфейс. Для таго каб стварыць модны настольнага ПК вопыт працы на вэб, выявы павінны быць папярэдне загружаныя так, што няма міргаць або фрагментаваць загрузкі. Мы выявілі, што нашы цяперашнія варыянты для папярэдняй загрузкі малюнкаў як недастаткова і часу, і было ясна, што нам трэба было знайсці новы падыход.
Распрацоўшчыкі, як правіла, выкарыстоўваюць пару агульнай практыкі:
Тыповыя масіва малюнкаў для папярэдняй загрузкі з JavaScript:
var imagesToLoad =
[
'image1.gif',
'image2.gif',
'image3.gif',
'etc...'
];
Наш скрыпт разбірае праз звязаныя і імпартнай стыляў і стварае масіў ўсіх малюнкаў URL-адрасы яны ўтрымоўваюць. Тады яна перабірае масіў URL-адрасы і стварае выява аб'екта для кожнага з іх такім чынам яны будуць кэшавацца і гатовыя для далейшага выкарыстання. Гучыць знаёма? Гэта таму, што ён амаль такі ж, як традыцыйны падыход JavaScript, але з асноўным дадатковым перавагай аўтаматызацыі. З дапамогай гэтага скрыпту азначае, што мы толькі не прыйдзецца турбавацца аб ўказанні фонавыя малюнкі і дзяржаў у нашай CSS файлы, і скрыпт клапоціцца аб усім астатнім.
/*
* --------------------------------------------------------------------
* jQuery-Plugin "preloadCssImages"
* by Scott Jehl, scott@filamentgroup.com
* http://www.filamentgroup.com
* reference article: http://www.filamentgroup.com/lab/automated_image_preloading/
* demo page: http://www.filamentgroup.com/examples/preloadImages/
*
* Copyright (c) 2008 Filament Group, Inc
* Licensed under GPL (http://www.opensource.org/licenses/gpl-license.php)
*
* Version: 1.0, 31.05.2007
* Changelog:
* 02.20.2008 initial Version 1.0
* --------------------------------------------------------------------
*/
$.preloadCssImages = function(settings){
//overrideable defaults
settings = jQuery.extend({
imgDir: 'images'
}, settings);
//dump all the css rules into one string
var sheets = document.styleSheets;
var cssPile = '';
for(var i = 0; i<sheets.length; i++){
var thisSheetRules = document.styleSheets[ i ].cssRules;
for(var j = 0; j<thisSheetRules.length; j++){
cssPile+= thisSheetRules[ j ].cssText;
}
}
//parse string for image urls and load them into the DOM
var allImgs = [];//new array for all the image urls
var imgUrls = cssPile.match(/[^\/]+\.(gif|jpg|jpeg|png)/g);//reg ex to get a string of between a "/" and a ".filename"
if(imgUrls != null && imgUrls.length>0 && imgUrls != ''){//loop array
var arr = jQuery.makeArray(imgUrls);//create array from regex obj
$(arr).each(function(k){
allImgs[ k ] = new Image(); //new img obj
allImgs[ k ].src = settings.imgDir +'/'+ this;
});
}
return allImgs;
}
Уставіць код, пазначаны вышэй у файл JavaScript і запусціць $.preloadCssImages(), калі DOM гатовы. Не забывайце, што вам таксама неабходна спасылацца на JQuery бібліятэкі JavaScript у вашу старонку. Па змаўчанні, сцэнар мяркуе, каранёвай каталог называецца "малюнкі". Гэты каталог па змоўчванні могуць быць зменены перадачай іншае значэнне imgDir для налады аб'ектаў, напрыклад так: $.preloadCssImages({ imgDir: 'myImagesDirectory' });
Прыклад ніжэй выкарыстоўвае наш скрыпт для разбору праз ўзор стылю якіх мы звязаны з гэтай старонцы. Ўзору стыляў мае фонавае выява правілы для элементаў, якія на самай справе не існуе на старонцы, таму выявы названага ў цяперашні час не загружаная. Націск на кнопку ніжэй будзе загружаць іх у DOM. Напрыклад мэтаў, мы напісалі загружаных малюнкаў на старонцы, а таксама.
Гэты сцэнар JQuery плягін, значэнне залежыць ад неверагоднай бібліятэкі JavaScript JQuery. Калі вы адчуваеце, асабліва прыгод, гэты сцэнар можа быць лёгка перанесены на іншую бібліятэку ці запісаць у старыя добрыя JavaScript, а таксама. Не саромейцеся, каб захапіць сцэнар і паспрабаваць яго на сабе. Мы пастаянна шукаем спосабы палепшыць нашы сцэнары, таму, калі ў вас узнікнуць пытанні або ёсць нейкія пытанні ці прапановы, калі ласка, пакіньце каментар ніжэй.
У цяперашні час гэты плягін мяркуе, што ўсе выявы захоўваюцца ў адным каталогу. У далейшым, мы хацелі б пашырыць сцэнар так, каб малюнак шляху распрацаваны ў дачыненні да размяшчэння CSS файл, што дазваляе выявы павінны быць загружаны з розных каталогаў на серверы.
Popular Links