如果侧边栏不可见，如何不请求侧边栏元素

Question

让我们想象一个博客。

例如：https://around.createx.studio/blog-grid-rs.html

这里我们可以看到有一个内容区和一个侧边栏。侧边栏在窄屏幕上不可见。换句话说，它存在，但不可见。

我们可以通过图像的例子清楚地揭示它。让我们专注于那个戴着虚拟现实眼镜的女孩的形象。那是图片th01.jpg。

如果没有侧边栏，th01.jpg 一样加载。

我想摆脱它。侧边栏可能真的承载着图像或其他东西。它可能包含广告脚本等。如果侧边栏不可见，如果我们不向服务器请求其元素，这将大大提高性能。

如果侧边栏不可见，您能告诉我如何避免对侧边栏元素的请求吗？即使我无法使用它们，我也想要这些方法的完整列表。我只想知道所有这些，即使我只使用一个。

Answer 1

如果您可以收到请求中的侧边栏数据：

const wrapper = document.querySelector('.wrapper');
fetch('https://jsonplaceholder.typicode.com/albums/1/photos')
  .then(response => response.json())
  .then(result => result.forEach((el) => {
    const img = new Image();
    img.src = el.thumbnailUrl;
    img.onload = function() {
        wrapper.append(img);
    };
  }))