Html图片懒加载动画

HTML图片懒加载是一种优化网页性能的技术，它可以延迟加载页面上的图片，只有当图片进入可视区域时才进行加载，从而减少页面的加载时间和带宽消耗。下面是一种常见的HTML图片懒加载动画的实现方式：

1. 在HTML中，将需要懒加载的图片的src属性设置为一个占位符，例如：

   <img src="placeholder.jpg" data-src="image.jpg" class="lazyload" alt="Image">

2. 使用CSS为占位符图片添加样式，使其显示为一个加载动画，例如：

   .lazyload {
     background: url(loading.gif) center center no-repeat;
   }

3. 使用JavaScript监听页面滚动事件，当图片进入可视区域时，将data-src属性的值赋给src属性，实现图片的懒加载效果。以下是一个简单的示例代码：

   window.addEventListener('DOMContentLoaded', function() {
     var lazyloadImages = document.querySelectorAll('.lazyload');
     var lazyloadThrottleTimeout;

     function lazyload() {
       if (lazyloadThrottleTimeout) {
         clearTimeout(lazyloadThrottleTimeout);
       }

       lazyloadThrottleTimeout = setTimeout(function() {
         var scrollTop = window.pageYOffset;
         lazyloadImages.forEach(function(img) {
           if (img.offsetTop < (window.innerHeight + scrollTop)) {
             img.src = img.dataset.src;
             img.classList.remove('lazyload');
           }
         });
         if (lazyloadImages.length === 0) {
           document.removeEventListener('scroll', lazyload);
           window.removeEventListener('resize', lazyload);
           window.removeEventListener('orientationChange', lazyload);
         }
       }, 20);
     }

     document.addEventListener('scroll', lazyload);
     window.addEventListener('resize', lazyload);
     window.addEventListener('orientationChange', lazyload);
   });

这样，当页面滚动时，图片会逐渐加载并显示出来，给用户带来更好的体验。