jquery 如何判断这图片链接是否正在

原创

mob649e8168f1bb 2023-07-31 13:49:59 ©著作权

文章标签 加载图片加载网页开发 文章分类 jQuery 前端开发

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

项目方案：使用 jQuery 判断图片链接是否正在加载

1. 项目背景

在网页开发中，经常需要加载大量的图片资源。为了提高用户体验，我们希望能够判断图片链接是否正在加载，以便在图片加载完成之前显示一个占位图或者加载动画，避免页面出现空白的情况。

2. 技术选型

为了实现这个功能，我们选择使用 jQuery，这是一个简单、功能强大的 JavaScript 库，广泛应用于网页开发中。

3. 解决方案

我们可以使用 jQuery 提供的 on() 方法来监听 load 和 error 事件，判断图片链接是否正在加载。

以下是一个示例代码：

$(document).ready(function() {
  // 监听所有的 img 标签
  $('img').on('load error', function() {
    if ($(this).is(':visible') && this.complete) {
      console.log('图片链接已加载完成:', $(this).attr('src'));
    } else {
      console.log('图片链接加载失败:', $(this).attr('src'));
    }
  });
});

上述代码的解释如下：

$(document).ready()：当页面加载完成后，执行回调函数中的代码。
$('img')：选取所有的 img 标签。
on('load error', function() { ... })：监听图片的 load 和 error 事件。
$(this).is(':visible')：判断图片是否可见，以避免隐藏图片的加载状态干扰判断结果。
this.complete：判断图片是否已经加载完成。
$(this).attr('src')：获取当前图片的 src 属性。

4. 项目应用

通过上述方案，我们可以在网页开发中实现以下功能：

在图片加载完成之前显示占位图或加载动画，提高用户体验。
监听图片加载失败事件，处理加载失败的情况，例如显示一个错误提示。

以下是一个在网页中应用该方案的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>图片加载判断示例</title>
  <script src="
  <script>
    $(document).ready(function() {
      $('img').on('load error', function() {
        if ($(this).is(':visible') && this.complete) {
          console.log('图片链接已加载完成:', $(this).attr('src'));
          $(this).addClass('loaded'); // 添加类名来标识图片已加载完成
        } else {
          console.log('图片链接加载失败:', $(this).attr('src'));
        }
      });
    });
  </script>
  <style>
    .loaded {
      border: 2px solid green;
    }
  </style>
</head>
<body>
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</body>
</html>

上述示例代码的解释如下：