延遲加載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成背景不背景圖像

回答

相關問題