jQuery图片加载显示loading效果

关于“jQuery图片加载显示loading效果”的完整攻略包括以下几个步骤：

1. 引入jQuery库

首先要确保页面中已经引入了jQuery库的文件。比如：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

2. 编写HTML和CSS

在HTML中需要先提供一些图片的img元素，同时需要为它们设置好类名和一些CSS样式，例如：

<div class="container">
  <img class="loader" src="loading.gif" alt="Loading...">
  <img class="img1" src="image1.jpg" alt="Image 1">
  <img class="img2" src="image2.jpg" alt="Image 2">
  <img class="img3" src="image3.jpg" alt="Image 3">
</div>

其中，loader为加载动画占位元素的类名，container为图片容器的类名。

在CSS中需要为img元素和.loader元素设置一些CSS样式。例如：

.container {
  display: flex; /* 让图片并排显示 */
  justify-content: space-between; /* 图片间隔相等 */
  align-items: center; /* 图片居中对齐 */
}

.loader {
  position: absolute; /* 绝对定位 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999; /* 置于最上层 */
}

3. 编写JavaScript

接下来就是编写JavaScript了。我们需要先为页面中的图片元素添加一个加载完成事件，然后在加载过程中显示loading动画，加载完成后将loading动画隐藏，同时将图片可见。

$(function() {
  // 为图片元素添加加载完成事件
  $('img').on('load', function() {
    $(this).show(); // 显示图片元素
    $('.loader').hide(); // 隐藏loading动画
  });

  // 显示loading动画
  $('.loader').show();
});

在实现中，我们通过jQuery的.on()方法为图片元素添加了一个加载完成事件，当图片加载完成后，就会触发事件中的代码。其中，$(this)代表当前完成加载的图片元素，$('.loader')代表loading动画元素。

至此，我们的代码就完成了，完整示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery图片加载显示loading效果</title>
    <style>
        .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .loader {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 999;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function() {
            $('img').on('load', function() {
                $(this).show();
                $('.loader').hide();
            });

            $('.loader').show();
        });
    </script>
</head>
<body>
    <div class="container">
        <img class="loader" src="https://i.stack.imgur.com/hzkvF.gif" alt="Loading...">
        <img class="img1" src="https://images.unsplash.com/photo-1632492888216-e75b49deb276" alt="Image 1">
        <img class="img2" src="https://images.unsplash.com/photo-1632449810737-a154532e8d6e" alt="Image 2">
        <img class="img3" src="https://images.unsplash.com/photo-1632572229326-6732f9883a8f" alt="Image 3">
    </div>
</body>
</html>

这是一个简单的图片加载显示loading效果的完整攻略。如果你想让效果更加完善，还可以通过CSS样式给loading动画加上过渡效果，让页面加载更加平滑。可以在后续的实践中逐步尝试和加深理解。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery图片加载显示loading效果 - Python技术站

jQuery图片加载显示loading效果

1. 引入jQuery库

2. 编写HTML和CSS

3. 编写JavaScript

相关文章