Tutaj jest kilka problemów. Po pierwsze, określono metodę ładowania asynchronicznego:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('jquery', '1.3.1');
google.setOnLoadCallback(function() {
// do stuff
});
</script>
ma kilka problemów. Znaczniki skryptu wstrzymują ładowanie strony podczas ich pobierania (w razie potrzeby). Teraz, jeśli ładują się powoli, jest to złe, ale jQuery jest małe. Prawdziwym problemem związanym z powyższą metodą jest to, że ponieważ ładowanie jquery.js odbywa się niezależnie dla wielu stron, zakończą ładowanie i wyrenderują przed załadowaniem jquery, więc każda stylizacja jquery będzie widoczną zmianą dla użytkownika .
Drugi sposób to:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
Wypróbuj kilka prostych przykładów, takich jak: posiadaj prostą tabelę i zmień tło komórek na żółte za pomocą metody setOnLoadCallback () vs $ (document) .ready () ze statycznym ładowaniem jquery.min.js. Druga metoda nie będzie miała zauważalnego migotania. Pierwsza wola. Osobiście uważam, że nie jest to dobre doświadczenie użytkownika.
Jako przykład uruchom to:
<html>
<head>
<title>Layout</title>
<style type="text/css">
.odd { background-color: yellow; }
</style>
</head>
<body>
<table>
<tr><th>One</th><th>Two</th></tr>
<tr><td>Three</td><td>Four</td></tr>
<tr><td>Five</td><td>Six</td></tr>
<tr><td>Seven</td><td>Nine</td></tr>
<tr><td>Nine</td><td>Ten</td></tr>
</table>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.3.1");
google.setOnLoadCallback(function() {
$(function() {
$("tr:odd").addClass("odd");
});
});
</script>
</body>
</html>
Powinieneś (powinnaś) zobaczyć, jak tabela się pojawia, a następnie wiersze stają się żółte.
Drugi problem związany z metodą google.load () polega na tym, że obsługuje ona tylko ograniczony zakres plików. Jest to problem dla jquery, ponieważ jest bardzo zależny od wtyczki. Jeśli spróbujesz dołączyć wtyczkę jquery do <script src="...">tagu, a google.load()wtyczka prawdopodobnie zawiedzie z komunikatami „jQuery nie jest zdefiniowane”, ponieważ nie została jeszcze załadowana. Naprawdę nie widzę sposobu na obejście tego.
Trzeci problem (z każdą z tych metod) polega na tym, że stanowią one jedno obciążenie zewnętrzne. Zakładając, że masz jakieś wtyczki i własny kod JavaScript, masz co najmniej dwa zewnętrzne żądania załadowania kodu JavaScript. Prawdopodobnie lepiej jest pobrać jquery, wszystkie odpowiednie wtyczki i własny kod i umieścić go w jednym zminimalizowanym pliku.
Od Czy powinieneś używać Google Ajax Libraries API do hostingu? :
Jeśli chodzi o czas ładowania, tak naprawdę ładujesz dwa skrypty - skrypt jsapi i skrypt mootools (skompresowana wersja z góry). To dwa połączenia, a nie jedno. Z mojego doświadczenia wynika, że czas ładowania był w rzeczywistości 2-3 razy wolniejszy niż ładowanie z mojego osobistego współdzielonego serwera, mimo że pochodził z Google, a moja wersja skompresowanego pliku była kilka K większa niż Google. To nawet po załadowaniu pliku i (prawdopodobnie) buforowaniu. Więc dla mnie, ponieważ przepustowość nie ma większego znaczenia, nie będzie miała znaczenia.
Wreszcie masz potencjalny problem z przeglądarką paranoiczną oznaczającą żądanie jako próbę XSS. Zwykle nie jest to problem z ustawieniami domyślnymi, ale w sieciach korporacyjnych, w których użytkownik może nie mieć kontroli nad używaną przeglądarką, nie mówiąc już o ustawieniach bezpieczeństwa, możesz mieć problem.
Tak więc ostatecznie nie widzę, jak korzystam z interfejsu API Google AJAX dla jQuery (bardziej „kompletne” interfejsy API to inna historia) pod wieloma względami oprócz zamieszczania tutaj przykładów.
srcna prostszą / bezpieczniejszą / szybszą składnię, której używasz teraz? Twoja odpowiedź stała się w zasadzie kanoniczna i obie zmiany pomogłyby ludziom szybko zdobyć to, co przyszli.