En este artículo, aprenderemos cómo cargar nuestro archivo jQuery local cuando falla CDN. En primer lugar, por qué deberíamos usar CDN si existe la posibilidad de que falle. Hay muchas ventajas de usar CDN en lugar de archivos jQuery locales.
Algunas ventajas de usar CDN son las siguientes.
- Reduce la carga de nuestro servidor.
- jQuery framework se carga más rápido desde estos CDN, por lo que ahorra nuestro ancho de banda.
Las posibilidades de que la CDN falle son escasas. Pero eso no significa que nunca fallará. Así que tenemos que tenerlo en cuenta.
¿Cómo verificar que nuestro script CDN se cargó correctamente o no?
Podemos verificar si nuestro script CDN está cargado o no al verificar el tipo de cualquier variable o función que debería estar presente después de cargar un script. Si obtenemos el tipo ‘indefinido’, significa que nuestro CDN falla.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- jQuery library -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body>
<script>
if(typeof jQuery == 'undefined'){
document.write("CDN fails")
}
else{
document.write("CDN loaded")
}
</script>
</body>
</html>
Producción:
CDN loaded
Si simplemente eliminamos cualquier letra del CDN, entonces nuestro CDN no se cargará y dará el resultado:
CDN fails
¿Cómo cargar jQuery localmente cuando falla CDN?
Primero, veamos cómo podemos vincular jQuery desde nuestra máquina local. Primero, descargaremos el archivo de la biblioteca jQuery del sitio web de jQuery y luego lo incluiremos en nuestro código HTML de esta manera.
<script src="jquery-3.6.0.js"></script>
Código para cargar jQuery desde la máquina local:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- jQuery library -->
<script src="jquery-3.6.0.js"></script>
</head>
<body>
<script>
if(typeof jQuery == 'undefined'){
document.write("CDN fails")
}
else{
document.write("CDN loaded")
}
</script>
</body>
</html>
Producción:
CDN loaded
Nota: Use la ruta completa a su archivo jQuery descargado. En mi caso, tanto el archivo HTML como el jQuery están en la misma carpeta. Ahora, veremos cómo cargar jQuery local en caso de que falle nuestro CDN.
Escriba las siguientes líneas de código y agregará jQuery desde la máquina cuando falle CDN.
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js”></script>
<script>window.jQuery || document.write(‘<script src=”jquery-3.6.0.js”><\/script>’)</script>
Estamos intentando cargar jQuery desde CDN. Si CDN falla, la variable «jQuery» no estará definida.
En la segunda línea, verificaremos si la variable «jQuery» no está definida o no, si no está definida, significa que CDN no se carga, luego cargaremos el archivo jQuery desde nuestra máquina local.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- jQuery library -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script>
window.jQuery || document.write('<script src="jquery-3.6.0.js"><\/script>')
</script>;
</head>
<body>
<script>
$().ready(function(){
document.write("Hey Geeks");
})
</script>
</body>
</html>
Producción:
Hey Geeks
Siempre obtendremos esta salida, incluso nuestra CDN falla. Como estamos manejando el caso de que si nuestro CDN falla, agregue el archivo jQuery de nuestra máquina.
Publicación traducida automáticamente
Artículo escrito por hritikrommie y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA