Javascript 延迟加载样式="；span标记内的背景图像

我已经在我的大多数网站上实现了延迟加载图像（使用此功能），但是我有一个商店页面，它是一个使用背景图像标记的缩略图加载，我的代码如下（它在smarty模板系统上运行）：-

}

我能找到的所有示例都依赖于位于div中的背景图像部分，但我的示例位于span标记中

有没有办法让它发挥作用

在线阅读建议span用于设置文本样式，但编写本文的原始开发人员似乎将其用于图像

---

谢谢你在这方面的任何帮助，我想我已经尽了一切努力让它工作

您是否尝试使用

建议“标签是一个内联容器，用于标记文本的一部分或文档的一部分。” 对于Div:“

标记定义HTML文档中的一个分区或部分。” 我认为只要它不影响其他样式，就不会有太大区别。

根据定义，

标记是用于格式化文本的内联元素。但是，您可以将其转换为块元素，使其行为与div完全相同

尝试将此添加到CSS规则：

.blocks1 .block a span.thumb {
    display: block;
}

这里解释了这一概念：

---

如果您的项目需要相邻显示，并且您不希望它们在每个项目后换行，请尝试

display:inline block取而代之。
我使用不同的插件（）

我在CSS中添加了以下内容：-

div.lazy {
    width: 120px;
    height: 90px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: 0 auto;
    display: block;

}

将第三方物流代码更改为：-

{section name=c loop=$cats->mCats}
<div class="block"><a class="clearfix" href="{$smarty.const.SITE_ROOT}/{$cats->mCats[c].menulinktext}/"><div class="lazy" data-src="{$smarty.const.SITE_ROOT}{$smarty.const.IMG_DIR}/thumbnails/{$cats->mCats[c].img_category}" /></div><span class="info">{$cats->mCats[c].name|escape:'htmlall'|widont}</span></a></div>{/section}

{section name=c loop=$cats->mCats}
{/section}

现在我有了完全延迟加载的图像：）
是的，我尝试了Div，但当我尝试时，缩略图的样式完全错误。感谢您的回复，一旦这被添加到CSS中，我需要对代码做什么才能使延迟加载工作，即，这部分：-更多信息，我在内联中添加了样式元素，因此代码如下：-所有内容都已正确格式化，但是如果我将div类更改为lazyload，所有图像都将消失！
div.lazy {
    width: 120px;
    height: 90px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: 0 auto;
    display: block;

{section name=c loop=$cats->mCats}
<div class="block"><a class="clearfix" href="{$smarty.const.SITE_ROOT}/{$cats->mCats[c].menulinktext}/"><div class="lazy" data-src="{$smarty.const.SITE_ROOT}{$smarty.const.IMG_DIR}/thumbnails/{$cats->mCats[c].img_category}" /></div><span class="info">{$cats->mCats[c].name|escape:'htmlall'|widont}</span></a></div>{/section}