在隐藏容器内隐藏加载图片?

时间:2016-10-01 03:51:30

标签: jquery css lazy-loading hidden pagespeed

我大家..我希望一切都对你好!

我遇到了问题,我需要一些帮助...... 所以,我使用“WM Gridfolio”(WMG)脚本制作一个组合,我想“懒加载”图片。我尝试了一些“懒加载”脚本,但我没有得到想要的“效果”!!

所以wmg创建一个拇指网格,当我点击其中一个时,它会打开一个“子容器” 一些文字和一些“大”的图像(我想要延迟加载)! 但是现在我尝试使用一些延迟加载脚本,在到达网格时加载所有图像,而不是在“子容器”打开时加载!

WMG的html部分是:

<div class="wmg-container"><!-- Main grid container -->
  <div class="wmg-item"><!-- First item -->
    <div class="wmg-thumbnail">
      <div class="wmg-thumbnail-content"> 
        <img src="img-1.jpg" alt="image"><!-- Thumbnail on the grid --> 
      </div>
      <div class="wmg-arrow"></div>
    </div>
    <div class="wmg-details"> <span class="wmg-close"></span>
      <div class="wmg-details-content"><!-- Sub container -->
        <div class="container">
            <div class="txt center">
                <h2>A title</h2><hr>
                <p>some text</p>
            </div>
            <div class="container-pics">
                <div class="pics"><img src="image1.jpg" alt=""></div><!-- image to be lazy loaded -->
                <div class="pics"><img src="image2.jpg" alt=""></div><!-- image to be lazy loaded -->
            </div>
        </div>
      </div>
    </div>
  </div>
  <!-- second item goes here -->
</div>

有关此脚本的所有信息都在那里发布:http://www.jqueryscript.net/gallery/jQuery-Plugin-For-Responsive-Portfolio-Gallery-WM-Gridfolio.html

演示(以防万一):http://www.jqueryscript.net/demo/jQuery-Plugin-For-Responsive-Portfolio-Gallery-WM-Gridfolio/

它的工作原理是:当点击网格中的图片时,“wmg-container”会获得一个新的“打开”类并显示“wmg-details-content”! 我想也许不会使用“延迟加载”脚本,而是将“container-pics”或img本身放入'display:none'并在“Sub容器”打开时更改显示! ?? 但是我不确定如何对页面的“加载速度”作出反应。当新的“打开”类位于主网格容器上时,我想到点击网格中的任何图像都会改变显示所有图像不仅仅是当前打开的“子容器”!

(网格中至少有10个图像,每个图像各有1或3个图像(在子容器中))

感谢您的帮助...如果您需要更多详细信息,请询问我将编辑帖子! 对不起我的英语,如果我不清楚!!

0 个答案:

没有答案