怎么做页面可视图片get请求获取加密数据后解密渲染，不在可视范围，不发起get请求

这个问题涉及到前端性能优化的一个重要概念——懒加载（Lazy Loading）。懒加载指的是在页面滚动到特定位置时，再去请求并加载图片等资源，以此来减少页面的加载时间和提升用户体验。

具体实现可以采用以下步骤：

1. 将图片的 URL 以 data-src 的自定义属性保存到 img 标签中，并将 src 属性设为空。
2. 使用 Intersection Observer API 监听元素是否进入可视区域。
3. 当元素进入可视区域时，将 data-src 的值赋给 src 属性，这时浏览器会自动发起 GET 请求获取图片资源并渲染到页面中。

代码示例：

<img data-src="xxx.jpg" src="" />

<script>
  // 监听元素是否进入可视区域
  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.intersectionRatio > 0) {
        // 进入可视区域后将 data-src 的值赋给 src
        entry.target.src = entry.target.dataset.src;
        // 停止监听该元素
        observer.unobserve(entry.target);
      }
    });
  });

  // 将需要懒加载的图片元素加入观察列表
  const lazyImgs = document.querySelectorAll('img[data-src]');
  lazyImgs.forEach(img => observer.observe(img));
</script>

这样就能实现图片懒加载，在不影响用户体验的情况下提升页面性能。同时，由于图片资源是在用户需要时才被请求，也能减少不必要的网络流量。