Question

所以，好吧，我已经在寻找已有30多个小时的解决方案了。要么代码不起作用，要么在隐藏div时加载图像。

<!-- DIV #1 -->
 <div class="col-xs-6 col-sm-5cols">
  <div class="thumbnail">
   <a href="https://placeholder.com/1.mp4">
   <img id="placeholder" src="https://placeholder.com/1.jpg"></a>
  </div>
 </div>
<!-- DIV #2 -->
 <div class="col-xs-6 col-sm-5cols">
  <div class="thumbnail">
   <a href="https://placeholder.com/1.mp4">
   <img id="placeholder" src="https://placeholder.com/1.jpg"></a>
  </div>
 </div>
<!-- DIV #3 -->
 <div class="col-xs-6 col-sm-5cols">
  <div class="thumbnail">
   <a href="https://placeholder.com/1.mp4">
   <img id="placeholder" src="https://placeholder.com/1.jpg"></a>
  </div>
 </div>
<!-- DIV #4 -->
 <div class="col-xs-6 col-sm-5cols">
  <div class="thumbnail">
   <a href="https://placeholder.com/1.mp4">
   <img id="placeholder" src="https://placeholder.com/1.jpg"></a>
  </div>
 </div>
<!-- DIV #5 -->
 <div class="col-xs-6 col-sm-5cols">
  <div class="thumbnail">
   <a href="https://placeholder.com/1.mp4">
   <img id="placeholder" src="https://placeholder.com/1.jpg"></a>
  </div>
 </div>

然后点击按钮

继续其他div

<!-- LOAD MORE BUTTON -->
 <!-- div #6.. -->
  <!-- div #7... -->
   <!-- div #8.... -->

Answer 1

我所做的只是通过隐藏元素的类隐藏缩略图，然后通过删除类重新显示它。我为一个col做了这个，因为它也适用于多个col。希望这会有所帮助，因为你的问题没有太大的作用。

HTML

    <button type="button" id="btnHide">Unhide</button>
    <!-- DIV #1 -->
     <div class="col-xs-6 col-sm-5cols">
      <div class="thumbnail hide">
        <a href="https://placeholder.com/1.mp4">
        <img id="placeholder" src="https://placeholder.com/1.jpg"></a>
       </div>
     </div>

     <script
      src="https://code.jquery.com/jquery-3.2.1.slim.js"
      integrity="sha256-tA8y0XqiwnpwmOIl3SGAcFl2RvxHjA8qp0+1uCGmRmg="
      crossorigin="anonymous"></script>

CSS

    .hide
    {
      display:none;
    }

JS - JQUERY

    $("#btnHide").click(function(){
        $(".thumbnail").removeClass('hide');
    });

Jsfiddle - https://jsfiddle.net/wLh8yd5y/1/

隐藏div onload＆amp;在点击按钮之前不要加载图像。揭示div＆amp;单击按钮时开始加载图像

1 个答案: