jquery判断图片是否存在

原创

mob64ca12f15103 2023-11-05 06:44:42 ©著作权

文章标签 jQuery HTML 错误提示 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12f15103的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery判断图片是否存在

在网页开发中，常常需要判断图片是否存在，以便进行相关的处理操作。本文将介绍如何使用jQuery来判断图片是否存在，并提供相应的代码示例。

1. 背景介绍

在网页中，我们通常会使用<img>标签来显示图片。但是，有时候我们需要在图片加载失败或者没有找到的情况下进行特定的处理，例如显示默认图片或者给出错误提示。

在之前的HTML标准中，并没有提供直接判断图片是否存在的方法。但是，通过使用jQuery，我们可以很方便地判断图片是否存在。

2. 使用方法

在使用jQuery判断图片是否存在之前，我们需要先引入jQuery库文件。可以在HTML文件中使用以下代码来引入jQuery：

<script src="

引入jQuery之后，我们可以使用以下代码来判断图片是否存在：

$(document).ready(function() {
  var imageUrl = "path/to/image.jpg";
  var image = new Image();
  image.src = imageUrl;
  $(image).on("load", function() {
    // 图片加载成功
    // 执行相关操作
  }).on("error", function() {
    // 图片加载失败或者没有找到
    // 执行相关操作
  });
});

在上述代码中，我们首先创建了一个<img>标签的实例image，并设置其src属性为待判断的图片路径imageUrl。接着，我们使用jQuery的.on()方法来监听load和error事件。

当图片加载成功时，会触发load事件，我们可以在事件处理函数中执行相关操作。当图片加载失败或者没有找到时，会触发error事件，我们也可以在事件处理函数中执行相关操作。

3. 代码示例

下面是一个完整的代码示例，展示了如何使用jQuery判断图片是否存在：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>判断图片是否存在</title>
  <script src="
</head>
<body>
  判断图片是否存在
  <img id="image" src="path/to/image.jpg">
  <script>
    $(document).ready(function() {
      var imageUrl = $("#image").attr("src");
      var image = new Image();
      image.src = imageUrl;
      $(image).on("load", function() {
        // 图片加载成功
        $("#image").after("<p>图片存在</p>");
      }).on("error", function() {
        // 图片加载失败或者没有找到
        $("#image").after("<p>图片不存在</p>");
      });
    });
  </script>
</body>
</html>

在上述代码中，我们在<img>标签上添加了一个id属性，以便通过jQuery选择器获取到该元素。在jQuery代码中，我们使用$("#image").attr("src")来获取图片路径。

当图片加载成功时，我们在图片后面添加了一段文字"图片存在"；当图片加载失败或者没有找到时，我们在图片后面添加了一段文字"图片不存在"。