防止加载背景图像答案

【问题标题】：Prevent from loading background images防止加载背景图像
【发布时间】：2016-10-20 07:23:57
【问题描述】：

在我的网站上有很多图片，为了让它更快，我想只显示其中的几个。然后如果用户想看更多，他只需要点击“显示更多”按钮。隐藏的图像放置在具有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>

任何帮助表示赞赏。

【问题讨论】：

标签： jquery html css performance

【解决方案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 规则。只需将图片网址保存在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>

【讨论】：

【解决方案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'))
    }
});

【讨论】：

【解决方案3】：

您可以在“显示更多”单击它后使用 ajax 请求加载图像。 Display: none 如果您想获得更高的性能，则不起作用，因为正如您所说，即使它是 display:none 也会加载。

【讨论】：