¿Cómo arreglar imágenes rotas automáticamente en jQuery?

Dada una imagen o un conjunto de imágenes rotas, la tarea es arreglar todas estas imágenes usando jQuery . Hay dos enfoques que se pueden tomar aquí:

Usando métodos jQuery como bind() y attr() .
Usando métodos jQuery como bind() y hide() .

Enfoque 1: Usar métodos jQuery como bind() y attr()

Método jQuery bind(): este método se usa para vincular o adjuntar uno o más controladores de eventos para el elemento o elementos correspondientes al selector específico.

Sintaxis:

$(selector).bind(event, eventData, func);

Parámetro: Acepta tres parámetros que se explican en detalle a continuación:

evento: una string que contiene uno o más tipos de eventos, como «clic», «presionar una tecla».
eventData: un objeto que contiene datos que luego se pueden pasar sobre los elementos seleccionados.
func: un controlador de eventos para ejecutar en los elementos seleccionados.

Método jQuery attr(): Este método se utiliza para establecer u obtener los atributos del elemento/elementos correspondientes al selector específico.

Sintaxis:

Para devolver el valor del atributo:
```
$(selector).attr(myAttribute);
```
Para establecer el atributo con su valor:
```
$(selector).attr(myAttribute, val);
```
Para establecer el atributo con su valor usando una función:
```
$(selector).attr(myAttribute, function(i, curValue));
```

Para establecer múltiples atributos:

$(selector).attr({attr1: val1, attr2: val2, ...});

Parámetro: Acepta los siguientes parámetros que se explican en detalle a continuación:

myAttribute: establece el nombre del atributo.
val: establece el valor del atributo.
function(i, curValue): construye una función que devuelve el valor del atributo a establecer.
i: Posición de índice del elemento recibido.
curValue: valor de atributo actual de los elementos seleccionados.

Ejemplo: hay tres imágenes en el siguiente ejemplo, una de las cuales contiene un localizador uniforme de recursos (o URL) roto. Vincule un evento de error a cualquiera de las imágenes si se produce un error al cargar la imagen (en este caso, la imagen del medio). Ahora, actualice el atributo src de la imagen para que apunte a una nueva imagen de la web.

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- jQuery -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
  
    <!-- Basic inline styling -->
    <style>
      body {
        text-align: center;
      }
  
      h1 {
        color: green;
        font-size: 2.5rem;
      }
  
      img {
        width: 200px;
        height: 200px;
      }
    </style>
</head>
<body>
    <h1>GeeksforGeeks</h1>
    <img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/
    20190710102234/download3.png" alt="GeeksForGeeks Logo Green" />
      
    <!-- Broken image -->
    <img src="https://media.geeksforgeeks.org/content/1.png" />
      
    <img src="https://media.geeksforgeeks.org/wp-content/
    uploads/20210915115837/gfg3-300x300.png" 
        alt="GeeksForGeeks Logo White" />
      
    <script type="text/javascript">
      $("img").bind("error", function (e) {
        var $this = $(this);
        $(this).attr("src","https://media.geeksforgeeks.org/wp-content/"+
        "uploads/20220208183723/responsive1-295x300.png");
      });
    </script>
</body>
</html>

Producción:

Sin jQuery:

Con jQuery:

Enfoque 2: Usar métodos jQuery como bind() y hide()

Método jQuery hide(): Este método se utiliza para ocultar el elemento correspondiente al selector específico.

Sintaxis:

$(selector).hide(duration, easing, callFunc);

Parámetro: Acepta tres parámetros que se especifican a continuación:

duración: establece la velocidad del efecto de ocultación.
easing: establece la velocidad del elemento en un punto diferente.
callFunc: una función de devolución de llamada que se ejecutará después de la operación de ocultación.

Ejemplo: este ejemplo es idéntico al ejemplo anterior, pero la diferencia es que en lugar de actualizar el atributo src de la imagen rota, ocultamos la imagen (similar a mostrar: ninguno; en CSS).

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- jQuery -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
  
    <!-- Basic inline styling -->
    <style>
      body {
        text-align: center;
      }
  
      h1 {
        color: green;
        font-size: 2.5rem;
      }
  
      img {
        width: 200px;
        height: 200px;
      }
    </style>
</head>
<body>
    <h1>GeeksforGeeks</h1>
    <!-- Broken image -->
    <img src="https://media.geeksforgeeks.org/content/2.png" />
      
    <img src="https://media.geeksforgeeks.org/wp-content/
    cdn-uploads/20190710102234/download3.png" 
        alt="GeeksForGeeks Logo Green" />
      
    <img src="https://media.geeksforgeeks.org/wp-content/
    uploads/20210915115837/gfg3-300x300.png" 
        alt="GeeksForGeeks Logo White" />
    
    <script type="text/javascript">
      $("img").bind("error", function (e) {
        $(this).hide();
      });
    </script>
</body>
</html>

Producción:

Sin jQuery:

Con jQuery:

Publicación traducida automáticamente

Artículo escrito por rajatsandhu2001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

HTML

Deja una respuesta Cancelar la respuesta