仅当选项卡处于活动状态时，如何在选项卡中延迟加载图像？

Question

我刚开始学习 CSS 和 javascript 。 我的网站有很多图片，它们是不同的标签。 现在我正在使用 lazy 加载图片。问题是，即使选项卡未激活，图像仍然会被加载。

当标签有效时，是否可以加载图像？

以下是我的标签示例：

HTML：

<div id="tab1" class="frame-tab">
  <div id="tab_title" class="tab-title" switchtype="click">
    <span class="titletext">tab</span>
      <ul class="tb">
        <liclass="a">
          <a href="javascript:;" onclick="return false;" onfocus="this.blur();" style="float:;margin-left:px;font-size:;color: !important;;">Car</a>
        </li>
        <liclass="">
          <a href="javascript:;" onclick="return false;" onfocus="this.blur();" style="float:;margin-left:px;font-size:;color: !important;;">Phone</a>
        </li>
      </ul>
    </div>
    <div id="tabcontent" class="tb-c">
      <div class="dxb_bc">
        <div class="particle">
          <dl class="sa">
            <dd class="m">
              <a href="1-1.html" target="_blank">
                <img src="image/nophoto.gif" file="/attachment/bfd7.jpg" style="" lazyloaded="true" _load="1" width="300" height="200">
              </a>
            </dd>
            <dt>
              <a href="1-1.html" target="_blank">dfasf</a>
            </dt>
          </dl>
          <dl class="sa">
            <dd class="m">
              <a href="2-1.html" target="_blank">
                <img src="image/nophoto.gif" file="/attachment/a34a.jpg" style="" lazyloaded="true" _load="1" width="300" height="200">
              </a>
            </dd>
            <dt>
              <a href="2-1.html" target="_blank">dfasf</a>
            </dt>
          </dl>
       </div>
     </div>
  </div>
</div>    

由于我遇到了一些js冲突问题，我无法使用jquery ...如果有人可以为我的问题提供解决方案，那就太棒了！

非常感谢！