jquery - 防止加载背景图片

Question

我的网站上有很多图片，为了加快速度我想只显示其中的一小部分。然后如果用户想看更多，他只需要点击“显示更多”按钮。隐藏的图像放置在具有 display:none 属性的 div 中。不幸的是，它们仍然加载(实际上它们是不可见的，但是，它们只是加载)。除非用户点击显示更多，否则我应该怎么做才能不加载它们？

这部分显示图片:

<div id="bx-pager">
    <?php
        for ($i=0; $i < count($this->images); $i++) { 
            echo "<a data-slide-index='" .$i. "' style='background: url(" .$this->baseUrl. "/img/upload/" .$this->images[$i]->image. ") center center no-repeat; background-size: cover;'></a>";
            if ($i == 10) {
              break;
            }
        }
    ?>

    <p id="show-more-images">Show more images</p>

    <div id="more-photos" style="display: none;">

    <?php
        for ($i=11; $i < count($this->images); $i++) { 
            echo "<a data-slide-index='" .$i. "' style='background: url(" .$this->baseUrl. "/img/upload/" .$this->images[$i]->image. ") center center no-repeat; background-size: cover;'></a>";
        }
    ?>
    </div>
</div>

如果用户需要，这是负责显示额外图像的 jQuery 部分:

<script type="text/javascript">
    $(document).ready(function(){
        $("#show-more-images").click(function(){
            $("#more-photos").toggle();
        })
    });
</script>

感谢任何帮助。

Answer 1

也许这样:

使用带有 background: none !important; 的 css 类，稍后将其删除。我已经测试过了，但我不确定之前是否没有加载图像。

$('.image').click(function() {
  $(this).removeClass('hidden');
});

.image {
  width: 200px;
  height: 100px;
  background-size: cover;
  border: 1px solid #000;
}
.image.hidden {
  background: none !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="image hidden" style="background-image:url('http://wallpapercave.com/wp/CpRGNUC.jpg');">
  click me
</div>

其他解决方案:

您可以稍后通过 javascript 添加 background-image 规则。只需将图片 url 保存在 data-image-url="http://www.your-site/your-image.jpg" 中，稍后将其用作 background-image.

$('.image').click(function() {
  $(this).css('background-image', 'url(' + $(this).attr('data-image-url') + ')');
});

.image {
  width: 200px;
  height: 100px;
  background-size: cover;
  border: 1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="image" data-image-url="http://wallpapercave.com/wp/CpRGNUC.jpg">
  click me
</div>