自定义指令图片懒加载

可以使用以下方法来实现图片的懒加载：

1. 在 HTML 中将图片的 `src` 属性设为一个占位符，例如 `<img src="placeholder.jpg" data-src="image.jpg" />`。
2. 使用 JavaScript 监听页面滚动事件，当图片进入可视区域时，将 `data-src` 的值赋给 `src` 属性，从而加载真实的图片。

   document.addEventListener("DOMContentLoaded", function() {
     var lazyImages = [].slice.call(document.querySelectorAll("img[data-src]"));

     if ("IntersectionObserver" in window) {
       var lazyImageObserver = new IntersectionObserver(function(entries, observer) {
         entries.forEach(function(entry) {
           if (entry.isIntersecting) {
             var lazyImage = entry.target;
             lazyImage.src = lazyImage.dataset.src;
             lazyImageObserver.unobserve(lazyImage);
           }
         });
       });

       lazyImages.forEach(function(lazyImage) {
         lazyImageObserver.observe(lazyImage);
       });
     } else {
       // Fallback for browsers without Intersection Observer support
       // Load all images immediately
       lazyImages.forEach(function(lazyImage) {
         lazyImage.src = lazyImage.dataset.src;
       });
     }
   });

3. 在 CSS 中为占位符图片设置样式，例如：

   img[data-src] {
     /* 设置占位符图片的样式 */
     background: url(placeholder.jpg) no-repeat center center;
   }

这样就可以实现图片懒加载了。当页面滚动时，只有进入可视区域的图片才会加载真实的图片资源，从而提高页面加载速度和性能。