有沒有一種方法可以在頁面加載後才加載內聯css背景圖片？

Question

我有很多圖片的我的網頁上加載作爲這樣一個div的背景圖像：

<div style="background-image:url('http://www.example.com/someimg.jpg');"></div> 

而對於頁面加載速度的目的我想只有頁面加載後所有的圖像已經完全加載。

現在我可以只添加背景圖片與一些jQuery的那樣：

$(window).bind("load", function() { 
    $('div').css('background-image', 'http://www.example.com/someimg.jpg')'); 
}); 

但我有大量的圖片，也是我使用一些動態的PHP加載這些圖像（其中用戶定期更新），所以我需要一些其他的解決方案，它可以用於網站上的任何背景圖片。

任何想法？

謝謝。

Answer 1

您可以通過將您的圖像加載到數據屬性中而不是內聯style屬性來實現。然後使用jQuery循環訪問具有該數據屬性的所有元素，並使用該值來填充樣式。

例如 HTML：

<div data-bg="https://images.unsplash.com/photo-1463123081488-789f998ac9c4?format=auto&auto=compress&dpr=1&crop=entropy&fit=crop&w=1199&h=799&q=80">Element with bg</div> 
<div>Element without bg</div> 
<div data-bg="https://images.unsplash.com/photo-1462774603919-1d8087e62cad?format=auto&auto=compress&dpr=1&crop=entropy&fit=crop&w=1199&h=799&q=80">Element with bg</div> 

的jQuery：

$(window).load(function(){ 
    $('[data-bg]').each(function(){ 
    $(this).css('background','url(' + $(this).data('bg') + ')'); 
    }); 
}); 

我敲這件事證明：http://codepen.io/anon/pen/jqgLja