Question

这里是一个例子。我希望加载与“所有类别”关联的每个图像，因为需要查看可用的类别。画廊的想法是向用户展示大约12个画廊，然后单击特定类别，然后打开包含所有图片的整个画廊。例如，如果用户单击“栏杆”类别，那么也会将所有栏杆照片也带给他们。现在的问题是，所有图像都立即加载，导致站点速度在大约12秒时超慢。我如何才能延迟加载所有没有分类图像的图像，以便仅在单击特定分类后才显示它们。代码的第一部分是栏杆类别本身，代码的第二部分是栏杆类别内部的图像。

      <div class="masonry__item col-md-4 col-sm-6 col-xs-12" data-masonry-filter="All Categories" data-index-for="railings">
        <div class="project-thumb hover-element border--round hover--active">
         <a href="">
         <div class="hover-element__initial">
           <div class="background-image-holder">
          <img alt="background" src="img/interior-9.jpg" />
         </div>
   </div>
 <div class="hover-element__reveal" data-scrim-top="5">
  <div class="project-thumb__title">
  <h4>Railings</h4>
  </div>
 </div>
    </a>
      </div>
       </div>

第二个密码

 <div class="masonry__item col-md-4 col-sm-6 col-xs-12" data-masonry-filter="Railings">
                                            <div class="project-thumb hover-element border--round hover--active">
                                                <a href="img/Railings/0907071207-min.jpg" data-lightbox="Gallery 1">
                                                    <div class="hover-element__initial">
                                                        <div class="background-image-holder">
                                                            <img alt="background" src="img/Railings/0907071207-min.jpg" />
                                                        </div>
                                                    </div>
                                                    <div class="hover-element__reveal" data-scrim-top="5">
                                                        <div class="project-thumb__title">
                                                            <h4>Railings</h4>

                                                        </div>
                                                    </div>
                                                </a>
                                            </div>
                                        </div>

Picture of Categories

Picture of inside one of the Categories

如您在两个屏幕截图中所见，我只能上传类别中的所有图像，并且仅在它们单击特定类别以加快网站访问速度时才将这些图像加载到类别中。

谢谢！

如何在html中延迟加载特定图片？（请阅读）

0 个答案: