背景图像的延迟加载

Question

我正在尝试延迟加载背景图像。 为了做到这一点，我添加了 jquery 的延迟加载插件：jquery-lazy。 我们使用npm i jquery-lazy安装它。

为了获得延迟加载的图像，我只需要添加如下所示的惰性类：

<img data-src="image.png" class="lazy">与下面的 js：

<script>
  $(function($) {
    $("img.lazy").Lazy();
});
</script>

它工作正常。

不幸的是，我不知道如何处理这样的背景图像：

<div style="background-image: url(background.jpg)">

实际上，这里的背景图像添加到样式字段中的<div>中...

我想知道我是否可以像处理<img>这样的基本图像一样延迟加载背景图像。 我试图通过添加<div class="lazy">来做到这一点，但它不起作用。

Answer 1

您可以对任何 html 标签使用 jquery-lazy：

<div class="lazy" style="display: block; background-image: url('http://jquery.eisbehr.de/lazy/images/3.jpg?t=1585165700');"></div>

$(function() {
    $('.lazy').lazy();
});

查看网站上的示例（示例有错误的 html 选项卡，但您可以在页面上看到源代码）： http : //jquery.eisbehr.de/lazy/example_load-background-images

Answer 2

 jQuery(function(){ jQuery('.lazy').lazy({ scrollDirection: 'vertical', effect: 'fadeIn', visibleOnly: true, //------------------------------------------------- bgLoader: function(element) { var small_bg = jQuery(element).css('background-image').match( /^url\\(\\"(.*?)\\"\\)$/i )[1]; setTimeout(function() { var large_bg = small_bg.replace('40/80', '200/400'); jQuery(element).css('background-image', 'url('+large_bg+')'); jQuery(element).addClass('loaded'); //element.load(); }, 500); }, //------------------------------------------------- }); });

 .lazy{ height: 200px; width: 250px; filter: blur(4px); transition: filter 2s ease-in; background-color: #ccc; background-repeat: no-repeat; background-size: cover; background-position: center; color: #fff; font-size: 3rem; display: flex; flex-direction: row; justify-content: center; align-items: center; } .lazy.loaded{ filter: none; } .lazy.bg1{background-image: url(https://picsum.photos/id/1/40/80);} .lazy.bg2{background-image: url(https://picsum.photos/id/2/40/80);} .lazy.bg3{background-image: url(https://picsum.photos/id/3/40/80);} .lazy.bg4{background-image: url(https://picsum.photos/id/4/40/80);} .lazy.bg5{background-image: url(https://picsum.photos/id/5/40/80);} .lazy.bg6{background-image: url(https://picsum.photos/id/6/40/80);}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.9/jquery.lazy.min.js"></script> <div class="lazy bg1" data-loader="bgLoader"> 1 </div> <div class="lazy bg2" data-loader="bgLoader"> 2 </div> <div class="lazy bg3" data-loader="bgLoader"> 3 </div> <div class="lazy bg4" data-loader="bgLoader"> 4 </div> <div class="lazy bg5" data-loader="bgLoader"> 5 </div> <div class="lazy bg6" data-loader="bgLoader"> 6 </div>