html5图片加载效果代码示例

温馨提示：这篇文章已超过230天没有更新，请注意相关的内容是否还可用！

HTML5提供了一些强大的图片加载效果，可以让我们在网页中展示出更加生动和吸引人的效果。下面我将为大家介绍几个常用的HTML5图片加载效果，并附上相应的代码示例。

我们来看一下如何使用HTML5的加载动画效果。通过使用CSS3的动画属性，我们可以为图片添加旋转、缩放、淡入淡出等效果。下面是一个示例代码：


<!DOCTYPE html>
<html>
<head>
<style>
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.loading {
  width: 100px;
  height: 100px;
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  animation: spin 2s linear infinite;
}
</style>
</head>
<body>
<div class="2f51-4ef7-e2b1-3887 loading"></div>
</body>
</html>

在上面的代码中，我们定义了一个名为`spin`的动画，使图片以线性无限循环的方式旋转。然后，我们创建了一个`loading`的`div`元素，并为其添加了`loading`类。通过CSS样式，我们设置了该元素的大小、边框样式和动画效果。

接下来，我们来讲解一下如何使用HTML5的懒加载效果。懒加载是指在页面滚动到特定位置时，才加载图片，以减少页面的加载时间和带宽消耗。下面是一个示例代码：


<!DOCTYPE html>
<html>
<head>
<style>
img.lazy {
  opacity: 0;
  transition: opacity 1s;
}
img.lazy.loaded {
  opacity: 1;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  $(window).on("scroll", function() {
    $("img.lazy").each(function() {
      if ($(this).offset().top < $(window).scrollTop() + $(window).height()) {
        $(this).attr("src", $(this).data("src")).addClass("loaded");
      }
    });
  });
});
</script>
</head>
<body>
<img class="e2b1-3887-24c7-4d30 lazy" data-src="image.jpg" alt="Lazy Loaded Image">
</body>
</html>

在上面的代码中，我们使用了jQuery库来实现懒加载效果。我们将`img`元素的`src`属性设置为空，并将图片的真实路径保存在`data-src`属性中。然后，通过监听页面滚动事件，当图片进入可视区域时，将`data-src`属性的值赋给`src`属性，并添加`loaded`类，使图片显示出来。

我们来讲解一下如何使用HTML5的图片预加载效果。图片预加载是指在页面加载完成之前，提前加载好图片资源，以提高用户体验。下面是一个示例代码：


<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  var images = ["image1.jpg", "image2.jpg", "image3.jpg"];
  var loadedImages = 0;
  $.each(images, function(index, value) {
    var img = new Image();
    $(img).on("load", function() {
      loadedImages++;
      if (loadedImages == images.length) {
        // 所有图片加载完成后执行的操作
        console.log("All images loaded!");
      }
    });
    img.src = value;
  });
});
</script>
</head>
<body>
</body>
</html>