有没有办法仅在页面加载后加载内联 css 背景图像？答案

【问题标题】：Is there a way to load inline css background images only after page load?有没有办法仅在页面加载后加载内联 css 背景图像？
【发布时间】：2016-09-20 06:32:53
【问题描述】：

我的页面上有很多图片，它们作为 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 来加载这些图片（用户会定期更新），所以我需要一些其他的解决方案，它适用于任何背景图片网站。

有什么想法吗？

谢谢。

【问题讨论】：

"只有在页面完全加载后" 你是什么意思？您页面的 HTML 将完全加载或已经加载。在图像之前你想在队列中做什么？脚本？
我的意思是当整个页面完成加载时。就像 $(window).bind("load", function() {... 工作。只有我需要一个适用于所有元素的函数，而不仅仅是我手动编写的特定元素。

标签： jquery css background-image pagespeed

【解决方案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

【讨论】：

好主意！谢谢。实际上我刚刚开始测试这个确切的想法:)
真的会让页面加载更快吗？
最终您仍然在加载所有内容，因此总页面大小 + 资源将是相同的（由于新的 JS 代码而增大了几个字节）。它所做的只是将 bg 图像的加载推迟到其他所有内容都加载完毕。 CSS bg 图像不会阻止页面呈现，因此它取决于您的用例，它是否为用户提供了延迟加载的任何感知好处。如果您达到了最大并发请求限制 (stackoverflow.com/questions/985431/…)，那么延迟可能会有所帮助，但从技术上讲几乎没有什么好处。
谢谢！这很有帮助！