如果为<img>添加新标记,则使html有效

Question

我有像这样的HTML img列表:

<img src="over.png" width="150" heigh="72" />
<img src="2_over.png" width="150" heigh="72" />
<img src="3_over.png" width="150" heigh="72" />

但这些图像非常大.我需要让它一个接一个地加载"像ajax".但我不能在开始时从javascript加载它,因为这是我们的cms desing这样的,如果我将改变它我们将有很大的麻烦.所以我打算做的是:

<img src="" width="150" heigh="72" path="over.png" />

并使用javascript逐个加载它并替换src,但html将无效.任何人都可以给我任何解决方案如何用有效的HTML实现它？

Answer 1

如果将数据放在某个地方是您唯一的问题,HTML5支持data-属性,可以让您向元素添加任意属性.只要属性名称以data-.开头,它就会一直有效.例如:

 <img src="" width="150" height="72" data-path="over.png" />

此功能虽然不是"有效的"HTML4,但仍应适用于所有浏览器,因为标签上的未知属性被简单地忽略(并按原样保留).

但是,您也可以通过JavaScript搜索一种方法.我真的不明白动态添加图片会如何破坏您的CMS.

此外,图像需要该alt属性(如果您没有任何有用的东西可以将其设置为空白),并且我不确定空白属性是否有效(您可能希望放置加载图像的路径).src