有没有办法只在页面加载后加载内联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循环遍历具有该数据属性的所有元素，并使用该值填充样式。

e.g。 的 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