Jeden obrazek na 2 serwerach - sposób na nieładujące się obrazki

Bywa czasem, że umieszczamy na stronie obrazki z innego serwera. Są nawet specjalne serwisy internetowe specjalizujące się w przechowywaniu obrazków które można gdzieś na innej stronie hotlinkować.

Niestety takie przechowalnie obrazków, mają w zwyczaju wyłączać swoje serwery bez ostrzeżenia, usuwać nasze obrazki gdy im się znudzą albo co jeszcze gorsze podmieniać nasze obrazki na inne np:



Jak więc zabezpieczyć się przed tym aby któregoś dnia na naszej stronie nie pojawiło się coś takiego?

Wpadłem na pomysł aby umieszczając obrazek na stronie podawać jego dwa adresy, podstawowy tak jak się go normalnie podaje i zapasowy który zostanie użyty gdy przeglądarce nie uda się załadować obrazka z podstawowego adresu.

<img src="podstawowy adres" data-src="zapasowy adres">

Wydaje się mi to dość eleganckim rozwiązaniem. Czytelne, nieskomplikowane, a podanie dodatkowego adresu wymaga tylko odrobinę więcej pracy przy tworzeniu strony.

Do tego aby to zadziałało potrzeba jeszcze dodać gdzieś na stronie niewielki skrypt:

<script>
var obrazki=document.getElementsByTagName("img");
for (i=0;i<obrazki.length;i+=1)
 if (obrazki[i].hasAttribute("data-src"))
   obrazki[i].setAttribute("onerror",'this.setAttribute("src",this.getAttribute("data-src"))');

function check_all_img()
{
 var obrazki=document.getElementsByTagName("img");
 for (i=0;i<obrazki.length;i+=1)
  if (obrazki[i].hasAttribute("data-src"))
   if (obrazki[i].clientHeight < 201)
    obrazki[i].setAttribute("src",obrazki[i].getAttribute("data-src"));
}
window.onload=check_all_img;
</script>

 Jak to działa?

Po pierwsze dodaje to do każdego obrazka który posiada atrybut data-src obsługę zdarzenia onerror które odpowiada za błędy przy ładowaniu.

Po drugie po załadowaniu strony sprawdza wielkość wszystkich obrazków z atrybutem data-src jeśli są zbyt małe (niższe niż 201px) znaczy, że ktoś nasze duże zdjęcie podmienił na mały obrazek z logo serwisu (albo tak jak w przykładzie z napisem Forbidden) i trzeba załadować właściwy obrazek z alternatywnego źródła. Jeśli nasze własne obrazki również są bardzo małe należy dopasować do nich tą wartość. Ale myślę, że jak się już hotlinkuje obrazki z zewnętrznych serwerów to raczej są one duże (bo małe można wkleić inline w kodzie strony).

Dlaczego akurat taka nazwa data-src. Początkowo chciałem to nazwać po prostu src2, przeglądarce nie robi to różnicy, nazwa może być dowolna byle by była wolna, ale walidatorowi się taki kod z nieznanymi mu atrybutami nie podoba. Aby kod strony został uznany za poprawny html nazwy wymyślnych przez nas nowych atrybutów powinny posiadać przedrostek data-


Mam jeszcze alternatywną wersję skryptu dla tych co nie chcą albo nie mogą korzystać z window.onload (czasy można zmniejszyć według własnego uznania, tutaj celowo są wysokie aby było widać kiedy zepsuty obrazek podmieniany jest na zdjęcie motyla)