A legeslegelső JavaScript próbálkozásom - legalább tíz éve - egy képnél az egér események lekezelése volt. Egérrel a kép felé mentünk és megváltozott a kép. Nagyon örültem, amikor sikerült. :) Rögtön a második script ezután az volt, hogy betöltöttem ezeket a képeket a memóriába, hogy ne csak a mouseover eseménykor induljon el a letöltés.
Nosztalgikus hangulatba kerültem, amikor azzal a feladattal szembesültem, hogy az egyik alkalmazásban lassú net esetén egy-egy kép zavaróan lassúan jön le, és ezért jó lenne az egyik CSS fájlban lévő képeket előre letölteni.
Az alap script-et még régebben az Ajaxian-on láttam, de két okból át kellett alakítani. 1. a JQuery-t lecseréltem Ext-base -re. 2. nekem csak egyetlen egy CSS fájlban lévő képekre volt szükségem, a teljes ext-all.css tartalmára nem.
Egy segédfüggvény, ami a paraméterbe kapott stíluslapból betölti a képeket:
var cssPile = '';
var cssHref = sheet.href || window.location.href;
var baseURLarr = cssHref.split('/');
baseURLarr.pop();
var baseURL = baseURLarr.join('/') + '/';
if (sheet.cssRules) {
Ext.each(sheet.cssRules, function(rule) {
cssPile += rule.cssText;
});
} else if(sheet.cssText) {
cssPile = sheet.cssText;
}
var imgUrls = cssPile.match(/[^\(]+\.(gif|jpg|jpeg|png)/g);
if (Ext.isArray(imgUrls)) {
Ext.each(imgUrls, function(src) {
if (src.charAt(0) === '"') {
src = src.substring(1, src.length);
}
(new Image).src = src.match('^(http://|/)') ? src : baseURL + src;
});
}
};
Az alábbi módon hívtam meg a saját CSS fájlomhoz:
Ext.each(document.styleSheets, function(sheet) {
if (sheet.href && sheet.href.match(/my.css/)) {
preloadCssImages(sheet);
}
});
});
UPDATE: időközben változtattak a FF CSS elérésén, így az esetleges " jeleket le kell vágni az src elejéről.
