针对不同的显示尺寸显示不同的img，只下载可见的img

针对不同的显示尺寸显示不同的图片，并且只下载可见的图片，这是一个涉及到响应式设计、性能优化和资源管理的问题。以下是关于这个问题的基础概念、优势、类型、应用场景以及解决方案的详细解答：

基础概念

响应式设计：响应式设计是一种网页设计方法论，它使网页能够根据设备的屏幕尺寸和分辨率自动调整布局和内容。
图片懒加载：图片懒加载是一种性能优化技术，它只在图片进入用户视口时才加载图片，而不是一次性加载所有图片。

优势

提升性能：通过只加载可见的图片，可以显著减少页面加载时间，提升用户体验。
节省带宽：减少不必要的图片下载，可以节省用户的网络带宽。
优化资源利用：减少服务器负载，优化服务器资源的使用。

类型

基于视口的懒加载：当图片进入用户视口时触发加载。
基于滚动的懒加载：当用户滚动页面到某个位置时触发加载。
基于预取的懒加载：根据用户的浏览习惯，提前加载可能需要的图片。

应用场景

电商网站：展示大量商品图片，通过懒加载可以显著提升页面加载速度。
新闻网站：长页面包含多张图片，通过懒加载可以减少初始加载时间。
社交媒体：用户滚动浏览大量图片内容，懒加载可以优化用户体验。

解决方案

HTML + CSS

使用CSS媒体查询来根据不同的屏幕尺寸显示不同大小的图片：

<picture>
  <source media="(max-width: 600px)" srcset="small.jpg">
  <source media="(min-width: 601px) and (max-width: 1200px)" srcset="medium.jpg">
  <img src="large.jpg" alt="Example Image">
</picture>

JavaScript（懒加载）

使用JavaScript实现图片懒加载：

<img data-src="image.jpg" class="lazy-load" alt="Example Image">

<script>
document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy-load"));

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.classList.remove("lazy-load");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  }
});
</script>