有没有办法只在页面加载后加载内联 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

有没有办法只在页面加载后加载内联 css 背景图片？

Is there a way to load inline css background images only after page load?

css

jquery

background-image

pagespeed