将图像延迟加载到背景而不是背景图像

Question

我想将图像延迟加载到 css background 标签中，而不是 background-image 标签中，因为我还有一个半透明的覆盖层需要应用到关注时尚：

background: linear-gradient(to bottom, rgb(255, 255, 255), rgba(255, 255, 255, 0.60) 75%), url("myimage.jpg") scroll bottom no-repeat;

目前我正在使用 jquery.lazy 库 (https://github.com/eisbehr-/jquery.lazy/)，但我愿意使用任何延迟加载库，只要它支持淡入淡出过渡。我怎样才能做到这一点？

另外，我不确定这些插件是如何工作的，但如果它们只是简单地覆盖目标标签中的任何内容，比如简单地覆盖 background 标签中的内容来添加图像——那显然是行不通的因为这会覆盖我的半透明覆盖层。

谢谢！

Answer 1

顶一下！

是的，您可以使用我的 jQuery.Lazy plugin。但是你必须使用回调让它正常工作，因为这不是 default 背景图像。我给你做了一个完整的例子，应该很容易理解。

因为你说的是 fade transitions 我想你指的是这个插件的 effect 选项。所以我添加了一个 fadeIn 效果。如果你不想这样，只需删除选项中的 effect 和 effectTime。

$(function() {
    $("div").Lazy({
        effect: 'fadeIn',
        effectTime: 1000,
        beforeLoad: function(e) {
            // before load, store the gradient onto the element data
            e.data("gradient", e.css("background-image"));
        },
        afterLoad: function(e) {
            // afterwards create the wanted background image
            e.css("background-image", e.data("gradient") + "," + e.css("background-image"));
        }
    })
});

div {
  width: 600px;
  height: 400px;
  background: linear-gradient(to bottom, rgb(255, 255, 255), rgba(255, 255, 255, 0.60) 75%) scroll bottom no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.lazy/1.7.3/jquery.lazy.min.js"></script>

<div data-src="http://dummyimage.com/600x400/000/ff"></div>

将图像延迟加载到背景而不是背景图像

Lazy loading img into background not background-image

javascript

css

jquery

lazy-loading