jQuery CDN s local a IE <9 fallback
Mozno ste si niekedy kladli otazku ci pouzit CDN alebo local. Niekedy je riesenie uprostred a kombinaciou mozete profitovat. Dalsim trnom v oku je Internet Explorer, ten mnohokrat tvori nezanedbatelne percento a podporovanie starsich verzii nieco stoji. Existuje ale riesenie, ako neodrezat tych nestastnikov a ostatnym poskytnut nieco lepsie.
Preco pouzit CDN
- Prehliadace vacsinou povolia 4 aktivne pripojenia
- Subor uz moze byt pre-cached
- Rychlejsie stiahnutie suboru
- Najnovsia verzia suboru
- Usetri zdroje hostingu
Local fallback
Dovodov preco sa nespoliehat len na CDN je viacero, podstatne je, ze ak sa subor z nejakeho dovodu nenacita, pokusime sa ho nacitat z lokalu.
Zakladnou myslienkou je overit premennu po nacitani skriptu, ak nieje definovana, nacitame skript z lokalu:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-2.0.3.min.js"><\/script>')</script>
jQuery je hostovane na viacerych popularnych CDN:
Spatna podpora pre IE 6/7/8
Od verzie 2.0, bola odstranena podpora pre starsi Internet Explorer 6, 7, 8. Na oplatku sa stal mensim a rychlejsim. Tieto starsie verzie IE su nadalej podporovane verziou 1.10. Pouzitim Conditional Comments, pre starsie IE ako 9 nacitame jQuery 1.10:
<!–-[if lt IE 9]>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<![endif]–->
<!–-[if gte IE 9]><!-–>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-–<![endif]–->
Vsetko spolu
Ked uz vieme, ako zabezpecit spatnu podporu v pripade zlyhania nacitania z CDN a ako zabezpecit funkcnost pre starsie IE tak to mozeme spojit do 1 kodu:
<!-–[if lt IE 9]>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"><\/script>')</script>
<![endif]–->
<!–-[if gte IE 9]><!–->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-2.0.3.min.js"><\/script>')</script>
<!–-<![endif]-–>