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

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为了这。但是您必须使用回调才能使其正常工作，因为这不是默认 背景图像。我给你做了一个完整的例子，它应该很容易理解。

因为你说的是​​ 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>