Kto używa Fancyboxa ten na pewno zdążył się już zetknąć z problemem niemiłosiernej zamuły w Internet Explorerze. Ja się zetknął i przyznam, że na początku nie wiedziałem, o co chodzi. A chodzi o arkusz stylów i zastosowany w nim filtr ze stajni Microsoftu – AlphaImageLoader.

Użycie filtru AlphaImageLoader ma niestety tragiczny skutek dla strony wyświetlanej w IE. Strona po prostu wiesza się na czas pobrania wszystkich obrazków, do których odwołuje się filtr. W porównaniu z innymi przeglądarkami czas potrzebny do całkowitego załadowania strony wydłuża się nawet kilkakrotnie. Jest to taki problem, obok którego po prostu nie da się przejść obojętnie.

Jednym z rozwiązań jest całkowite usunięcie filtru AlphaImageLoader, którego używanie nie jest zresztą praktyką polecaną. Jeśli jednak zdecydujemy się na to rozwiązanie, to w sumie możemy równie dobrze zrezygnować z Fancyboxa w ogóle – filtr ten bowiem odpowiada za prawidłowe wyświetlanie przeźroczystości w plikach .png w IE. Jak wygląda Fancybox bez tego filtru możecie przekonać się na tym przykładzie. Jeśli podejrzycie sobie arkusz stylów zauważycie, że usunąłem z niego wszystkie filtry. Efekt? W IE przez chwilę pojawia się brzydka, gruba czarna ramka. Blah! Nie przejdzie.

Co zatem zrobić? Rozwiązanie jest proste – zamiast ścieżki relatywnej do obrazków należy podać ścieżkę absolutną, czyli taką z http i całą resztą. Jak będzie to wyglądało w praktyce? Wszędzie tam, gdzie w arkuszu stylów znajduje się filtr AlphaImageLoader, zmienić ścieżkę pliku na absolutną, na przykład zamiast:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_title_over.png', sizingMethod='scale');

wpiszemy:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.webinside.com.pl/wp-content/themes/webinside/fancybox/fancy_title_over.png', sizingMethod='scale');

Tak więc podamy pełną ścieżkę z adresem domeny włącznie. To problem rozwiąże definitywnie, a jedynym mankamentem jest konieczność zmiany ścieżki np. przy zmianie adresu strony. Zresztą – przekonajcie się sami:

Wersja ze ścieżkami relatywnymi

Wersja ze ścieżkami absolutnymi

Mój pomiar może nie jest zbyt dokładny, ale w IE 8 strona ze ścieżkami relatywnymi ładowała się ok. 4 sekund (!), natomiast w przypadku podania ścieżek absolutnych wyszło mi mniej niż sekunda. Myślę więc sobie, że gra jest warta świeczki. :)

Podobne wpisy: