为img设置display:none后，如何阻止浏览器加载不必要的图片资源？

• 动态赋值图片地址
  一开始不给<img>设置src属性，改用data-src存储真实的图片地址，等需要显示图片的时候，再把data-src的值赋值给src。这样浏览器在初始渲染时不会识别到有效的图片地址，自然不会发起请求。
  示例代码：

  <img class="hidden-img" data-src="your-image.jpg" alt="图片描述">
  <script>
    // 当需要显示图片时执行这段代码
    const img = document.querySelector('.hidden-img');
    img.src = img.dataset.src;
  </script>
  

• 用CSS背景图替代img标签
  如果图片不需要用<img>标签实现，就把它设为某个元素的背景图。当元素被设置为display:none时，浏览器不会加载该背景图，只有元素恢复可见状态后才会请求资源。
  示例代码：

  .hidden-bg-img {
    display: none;
    background-image: url('your-image.jpg');
    width: 300px;
    height: 200px;
  }
  

• 延迟插入img元素
  初始DOM里不包含这个隐藏的图片元素，等需要显示的时候再通过JS动态创建并插入到页面中。这种方式从根源上避免了浏览器在初始阶段解析到img标签而发起请求。
  示例代码：

  // 需要显示图片时执行
  function showImage() {
    const img = document.createElement('img');
    img.src = 'your-image.jpg';
    img.alt = '图片描述';
    document.getElementById('container').appendChild(img);
  }
  

• 用noscript标签包裹
  把不需要初始加载的img放在<noscript>标签里，正常情况下浏览器不会加载里面的图片，只有当浏览器禁用JavaScript时才会解析并请求资源。这个方法适合那些不需要动态显示的备用图片。
  示例代码：

  <noscript>
    <img src="your-image.jpg" alt="图片描述">
  </noscript>
  

内容的提问来源于stack exchange，提问作者kk_li