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类，稍后将其删除。我测试了它，但我不确定图像是否在之前加载。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

其他解决方案：

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您可以动态生成这些图像元素，从而确保加载速度更快（因为页面上的文本较少，但实际速度增益最小）。

将图片链接放在如下数组中：

var links = [
    '/image1.png', 
    '/image2.png'
];

然后生成元素：

$("#show-more-images").click(function(){
    var link, $el;
    for (var i=0; i<links.length; i++) {
        link = links[i];
        $el = $('<a>').attr('style', 'background: url(' + link + ')');
        $el.appendTo($('#more-photos'))
    }
});

Answer 3

您可以在“显示更多”后使用ajax请求单击它来加载图像。显示：如果你想获得更高的性能，则无效，因为正如你所说，它甚至会加载显示：无。

防止加载背景图像

3 个答案: