Lazy load style="background-image inside a span 标签

Question

我已经为我的大部分网站实现了延迟加载图像（使用这个 https://github.com/tuupola/lazyload），但是我有一个商店页面，其中包含大量使用背景图像标签的缩略图，代码我有如下（在 smarty 模板系统上是运行）：-

{section name=c loop=$cats->mCats}
<div class="block"><a class="clearfix" href="{$smarty.const.SITE_ROOT}/{$cats->mCats[c].menulinktext}/"><span class="thumb" style="background-image: url({$smarty.const.SITE_ROOT}{$smarty.const.IMG_DIR}/thumbnails/{$cats->mCats[c].img_category});"></span><span class="info">{$cats->mCats[c].name|escape:'htmlall'|widont}</span></a></div>{/section}

CSS :-

.blocks1 .block a span.thumb {
width: 120px;
height: 90px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
margin: 0 auto

}

我能找到的所有示例都依赖于 div 内的背景图像部分，但我的是在 span 标签内。

有没有办法让它工作？

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

感谢您对此提供的任何帮助，我想我已经尝试了几乎所有方法来让它工作！！

Answer 1

你试过用 <Div> 做吗？

W3School 建议“<span> 标签是一个内联容器，用于标记文本的一部分或文档的一部分。” 对于 Div：“<div> 标记定义了 HTML 文档中的一个分区或部分。” 我觉得应该不会有太大的区别，只要不影响你其他人的风格就行？

Answer 2

<span> 标签根据定义是一个 inline 元素，用于格式化文本。但是，您可以将其转换为 block 元素，因此它的行为与 div.

完全相同

尝试将此添加到您的 CSS 规则中：

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

概念解释在这里：https://www.w3schools.com/html/html_blocks.asp

如果您的项目需要并排显示，并且您不希望它们在每个项目之后换行，请尝试 display: inline-block;。

Answer 3

我使用了不同的插件 (http://jquery.eisbehr.de/lazy/#about)

我将此添加到 CSS :-

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

}

将 tpl 代码更改为：-

{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}

我现在可以完全延迟加载图片了:)

Lazy load style="background-image inside a span 标签

Lazy load style="background-image inside a span tag

javascript

css

php

lazy-loading

smarty