如何在 jQuery 中自动修复损坏的图像？

给定一个图像或一组损坏的图像，任务是使用 jQuery 修复所有这些图像。这里可以采用两种方法：

• 使用 jQuery 方法，例如 bind() 和 attr()。
• 使用 jQuery 方法，例如 bind() 和 hide()。

方法一：使用 jQuery 方法，例如 bind() 和 attr()

jQuery bind() 方法：此方法用于为与特定选择器对应的元素绑定或附加一个或多个事件处理程序。

句法：

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

参数：它接受三个参数，下面详细解释：

• event：一个字符串，包含一个或多个事件类型，例如“click”、“keypress”。
• eventData：一个对象，其中包含可以通过选定元素传递的数据。
• func：要在选定元素上执行的事件处理程序。

jQuery attr() 方法：该方法用于设置或获取特定选择器对应的元素/元素的属性。

句法：

• 返回属性值：

  $(selector).attr(myAttribute);

• 要设置属性及其值：

  $(selector).attr(myAttribute, val);

• 使用函数设置属性及其值：

  $(selector).attr(myAttribute, function(i, curValue));

• 设置多个属性：

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

参数：它接受以下参数，详细解释如下：

• myAttribute：设置属性的名称。
• val：设置属性的值。
• 函数(i, curValue)：构造一个函数，返回要设置的属性值。
• i：接收到的元素的索引位置。
• curValue：选定元素的当前属性值。

示例：以下示例中有三张图像，其中一张包含损坏的统一资源定位器（或 URL）。如果加载图像（在本例中为中间图像）导致错误，则将错误事件绑定到任何图像。现在，更新图像的src属性以指向来自网络的新图像。

HTML

    
    
    
  
    
    
      body {
        text-align: center;
      }
  
      h1 {
        color: green;
        font-size: 2.5rem;
      }
  
      img {
        width: 200px;
        height: 200px;
      }
    


    GeeksforGeeks
    
      
    
    
      
    
      
    
      $("img").bind("error", function (e) {
        var $this = $(this);
        $(this).attr("src","https://media.geeksforgeeks.org/wp-content/"+
        "uploads/20220208183723/responsive1-295x300.png");
      });
    

输出：

没有 jQuery：

使用 jQuery：

方法 2：使用 jQuery 方法，例如 bind() 和 hide()

jQuery hide() 方法：该方法用于隐藏特定选择器对应的元素。

句法：

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

参数：它接受下面指定的三个参数：

• 持续时间：设置隐藏效果的速度。
• easing：设置元素在不同点的速度。
• callFunc：隐藏操作后要执行的回调函数。

示例：此示例与上一个示例相同，但不同之处在于更新src 破碎图像的属性，我们隐藏图像（类似于CSS中的display：none; ）。

HTML

    
    
    
  
    
    
      body {
        text-align: center;
      }
  
      h1 {
        color: green;
        font-size: 2.5rem;
      }
  
      img {
        width: 200px;
        height: 200px;
      }
    


    GeeksforGeeks
    
    
      
    
      
    
    
    
      $("img").bind("error", function (e) {
        $(this).hide();
      });
    

输出：

没有 jQuery：

使用 jQuery：