在不使用 HTML 样式属性的情况下动态设置多个背景图片 url

Question

tl;博士

在不使用 HTML style="" 属性的情况下，还有哪些其他动态解决方案可用于为页面设置 background-image: url()？

我的页面以 13 个元素开始，我在其中设置了 url()，当您滚动到页脚时，我们的惰性加载器将加载 9 个（最多 12 个）更多元素，这些元素再次具有自己独特的“动态”图像集。

我认为我们只需要降低我们的 SEO 分数，因为我认为没有更好的解决方案可用。

注意：如果需要，我可以创建一个 JS Fiddle，但我认为这描述得很好/通用，因此不需要它。请让我知道是否需要回答。

---

目的

我们公司正在努力提高他们的网站 SEO 得分，我们确定要修复的一项是将所有 HTML 样式属性移动到单个 CSS 文件（或 <style></style> 声明）中。我相信这被称为问题的原因是因为我们有几个元素使用它来设置他们的文章background-image: url();。

为什么不直接使用<img> 标签呢？

我们的客户有很多不同类型的图片（尺寸、焦点中心等），他们想在发布文章时使用。为了让我们无论屏幕大小都拥有最一致的设计，我们使用 CSS background-image 样式而不是 <img> HTML 标签。我们还在处理一些 WP/XMLRPC 发布限制，我们无法为此创建自定义解决方案。

所以我们不能为此使用 HTML，如果可以的话，这将是一个简单的解决方案。

为什么当前设置在style 属性中？

这是迄今为止我们发现的最好的“动态”解决方案。到目前为止（这会影响我们的 SEO 分数），这从来都不是问题。在我们的 CSS 样式中，我们有 .class {} 共享的特定背景图像样式。每篇文章唯一不同的是图片的 URL，所以我们通过 PHP 在style="background-image: url();" 属性中动态设置。

问题

我的页面以 13 个元素开始，我在其中设置了 url()。我“可以”在顶部设置内联 CSS，为这些元素设置动态类，这些元素将具有其独特的 background-image: url();'s，即使设置/执行听起来很痛苦，这也可以工作。

但是当您滚动到页脚时，我们会发生延迟加载。我们通过 AJAX 加载了 9 个（最多 12 个）更多的元素，这些元素再次拥有自己独特的“动态”图像集。我可以在这里做同样的事情，创建另一个内联<style></style> CSS 位......但这是踢球者。我们对 SEO 的其他抱怨之一是我们将多个内联 CSS（以及 JS）组合到一个声明中。如果我继续创建更多 <style></style> 声明来解决此 SEO 问题，我将创建/恶化另一个 SEO 问题。

问题

在不使用 HTML style="" 属性的情况下，还有哪些其他动态解决方案可用于为页面设置 background-image: url()？

我认为我们只需要在这一项上降低我们的 SEO 分数，因为我认为没有更好的解决方案可用。

Answer 1

一个想法是将background-image内联样式更改为对SEO分数没有影响的数据属性，然后您可以添加一些JS代码以将它们更改为内联样式。

当然，这可能会对其他脚本产生影响，因为我不知道您的网站是如何构建的，因此您可以将此 JS 代码添加为第一个 JS 代码，以便更改所有内联样式并准备好它们对于任何未来的脚本。

$('.box').each(function() {
  var url = $(this).data('background');
  $(this).css('background-image','url('+url+')');
})

.box {
  width:100px;
  height:100px;
  display:inline-block;
  background-size:cover;
  border:1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" data-background="https://lorempixel.com/400/200/">
</div>
<div class="box" data-background="https://lorempixel.com/300/200/">
</div>
<div class="box" data-background="https://lorempixel.com/400/400/">
</div>

顺便说一句，我们可以将此解决方案推广到任何内联样式。所以想法是将所有样式设置为数据属性，然后我们只需将它们更改为内联样式：

$('[data-style]').each(function() {
  $(this).attr('style',$(this).data('style'));
  /*Not mandatory*/
  $(this).removeAttr('data-style');
})

.box {
  width:100px;
  height:100px;
  display:inline-block;
  background-size:cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" data-style="background-image:url(https://lorempixel.com/400/200/);padding:20px;border-color:yellow;">
</div>
<div class="another-box" data-style="background-image:url(https://lorempixel.com/200/200/);margin:20px;border:5px solid pink;height:50px;">
</div>
<div data-style="background-image:url(https://lorempixel.com/200/200/);height:200px;">
</div>

注意：正如我上面所说，我们需要在网站的复杂性和我们获得的分数之间取得平衡。如果我们可以轻松获得 80%，则无需为了获得 85% 或 90% 而使网站过于复杂，并且可能会产生一些错误或使网站的维护变得困难。