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

OP在这里！

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

因为你说的是fade transitions我认为你的意思是这个插件的effect选项。所以我添加了fadeIn效果。如果您不想要，请在选项中删除effect和effectTime。

＆＃13;

$(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"));
        }
    })
});

＆＃13;

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

＆＃13;

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

＆＃13;

懒惰加载img到背景而不是background-image

1 个答案: