Az egyik projecten dolgozgattam, minden faszán ment, aztán egyszercsak az ügyfél szólt, hogy valami nem jó a site-al, IE alatt nagyon lassú. Hát hajrá, nézzük meg mi a probléma. IE8 betölt, Developer Tools indít, Start Profiling.
Frissítek, erre a css nevű function csinál egy több mint 4 másodperces delay-t. Először azt hittem hogy valamimelyik jQuery scriptem valamelyik .css function része nem oké, és ott akad meg. No el is kezdtem kiszedegeti egyenként a plugineket (elég sokat használunk ezen a site-on), majd a colorbox kivétele után egyszercsak megszűnt a probléma. No akkor elkezdtem olvasgatni a forrását, hogy melyik functionja lehet a hibás… De valahogy nem találtam semmi komoly dolgot, ami kiakasztaná. Ellenben a hozzá tartozó CSS fájl!
A következő található a CSS fájl alján:
.cboxIE #cboxTopLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderTopLeft.png, sizingMethod='scale');}
.cboxIE #cboxTopCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderTopCenter.png, sizingMethod='scale');}
.cboxIE #cboxTopRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderTopRight.png, sizingMethod='scale');}
.cboxIE #cboxBottomLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderBottomLeft.png, sizingMethod='scale');}
.cboxIE #cboxBottomCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderBottomCenter.png, sizingMethod='scale');}
.cboxIE #cboxBottomRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderBottomRight.png, sizingMethod='scale');}
.cboxIE #cboxMiddleLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderMiddleLeft.png, sizingMethod='scale');}
.cboxIE #cboxMiddleRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/internet_explorer/borderMiddleRight.png, sizingMethod='scale');}
No megvan a kis dög! A Microsoft.AlphaImageLoader(); metódus a hibás, ha kivettem ezeket a sorokat, azonnal felgyorsult a site, a profilerben sem látszott hatalmas hézag, mint előtte. No de akkor most mi a megoldás? IE-t ne támogassuk és kész? Ez nem épp egy elfogadható eredmény. Megnéztem a colorboxot IE-ben, és egy kicsit máshogy néz ki mint firefoxban például… Akkor itt a kérdés, hogy ezek a sorok ugyan miért is vannak, ha így se ugyanaz?
Újabb fejvakarás, és 10 perc vad Google keresés után jött a megoldás: A css fájlban ha megadunk egy háttérképet mondjuk, azt mindig a css-fájlhoz képest keresi, míg a Microsoft.AlphaImageLoader(); pont nem így működik, ő az URL-hez képest keresi ugyanezeket a fájlokat, és ez hiányzó kép rögtön egy nagy kését okoz ennek a metódusnak (juipjé Microsoft). Így tehát (mint esetemben), ha a css-t nem a gyökérben tárolod, hanem egy /css/style.css helyen például, akkor az AlphaImageLoader már ki fog akadni. Minden kedves webfejlesztőnek ajánlom hogy figyeljen oda erre, mert nagyon idegesítő problémákat fog okozni!