延迟加载IMG成背景不背景图像

我想lazyload图像到的CSS background标签，而不是background-image标签因为我也有一个半透明的覆盖，其需要在下面的方式被应用：延迟加载IMG成背景不背景图像

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标记中的内容以添加图像 - 显然不会如此覆盖我的半透明覆盖层。

谢谢！

来源

2016-08-15 abagshaw

OP在这里！

是的，你可以用我的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>

来源

2016-08-18 06:18:47 eisbehr

延迟加载IMG成背景不背景图像

回答

相关问题