Existem alguns problemas aqui. Primeiro, o método de carregamento assíncrono que você especificou:
<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>
tem alguns problemas. As tags de script pausam o carregamento da página enquanto são recuperadas (se necessário). Agora, se o carregamento for lento, isso é ruim, mas o jQuery é pequeno. O verdadeiro problema com o método acima é que, como o carregamento do jquery.js ocorre independentemente em muitas páginas, eles terminam de carregar e renderizar antes do carregamento do jquery, portanto, qualquer estilo de jquery que você fizer será uma alteração visível para o usuário .
A outra maneira é:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
Tente alguns exemplos simples, como, ter uma tabela simples e altere o plano de fundo das células para amarelo com o método setOnLoadCallback () vs $ (document) .ready () com uma carga estática de jquery.min.js. O segundo método não terá cintilação perceptível. A primeira vontade. Pessoalmente, acho que não é uma boa experiência do usuário.
Como exemplo, execute isso:
<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>
Você (deve) vê a tabela aparecer e as linhas ficam amarelas.
O segundo problema com o método google.load () é que ele hospeda apenas um intervalo limitado de arquivos. Este é um problema para o jquery, pois é extremamente dependente do plug-in. Se você tentar incluir um plug-in jquery com uma <script src="...">
tag e google.load()
o plug-in provavelmente falhará com as mensagens "jQuery não está definido" porque ainda não foi carregado. Eu realmente não vejo uma maneira de contornar isso.
O terceiro problema (com qualquer um dos métodos) é que eles são uma carga externa. Supondo que você tenha alguns plug-ins e seu próprio código Javascript, você deve ter no mínimo duas solicitações externas para carregar seu Javascript. Provavelmente, é melhor você obter o jquery, todos os plug-ins relevantes e seu próprio código e colocá-lo em um arquivo minificado.
De você deve usar a API de bibliotecas Ajax do Google para hospedagem? :
Quanto aos tempos de carregamento, você está realmente carregando dois scripts - o script jsapi e o mootools (a versão compactada de cima). Portanto, são duas conexões, em vez de uma. Na minha experiência, descobri que o tempo de carregamento era na verdade 2-3 vezes mais lento do que o carregamento do meu servidor compartilhado pessoal, mesmo que fosse do Google, e minha versão do arquivo compactado era duas vezes maior que a do Google. Isso, mesmo depois que o arquivo foi carregado e (presumivelmente) armazenado em cache. Então, para mim, como a largura de banda não importa muito, não importa.
Por fim, você tem o problema potencial de um navegador paranóico sinalizando a solicitação como algum tipo de tentativa de XSS. Normalmente, não é um problema com as configurações padrão, mas nas redes corporativas em que o usuário pode não ter controle sobre qual navegador usar, sem falar nas configurações de segurança que você pode ter.
Portanto, no final, não consigo me ver usando a API do Google AJAX para jQuery pelo menos (as APIs mais "completas" são uma história diferente em alguns aspectos) muito, exceto para postar exemplos aqui.
src
para a sintaxe mais simples / segura / rápida que você usa agora? Sua resposta se tornou basicamente canônica e as duas mudanças ajudariam as pessoas a obter o que buscavam rapidamente.