如果为<img>添加新标签，则使html有效

Make html valid if adding new tag for <img>

本文关键字：标签 则使 html 有效 新标签 img 如果 添加      更新时间：2023-09-26

我有一个像这样的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设计，我们会有大麻烦，如果我要改变它。所以我打算做的是:

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

，然后用javascript逐个加载并替换src，但是HTML将无效。谁能给我任何解决方案，如何实现它与有效的html?

如果把数据放在某个地方是你唯一的问题，HTML5支持data-属性，这让你可以为元素添加任意属性。只要属性名以data-开头，它就保持有效。例如:

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

这个特性，虽然不是"有效的"HTML4，但应该仍然在所有浏览器上工作，因为标签上的未知属性被简单地忽略(并保持原样)。

不过，您也可以寻找一种只使用JavaScript完成的方法。我真的不明白动态添加图片怎么会破坏你的CMS。

此外，alt属性是所需的图像(使其为空白，如果你没有任何有用的东西写代替)，我不确定一个空白的src属性是有效的(你可能想把一个加载图像的路径代替)。

在调用javascript函数之前在图像中设置一个有效的url，例如:

<img src="blank.gif" alt="Blank Image" width="10" height="10" />

至于"path"属性，您可以将指向图像的链接放在alt属性中。这样你的图像标签将是有效的。

<img src="blank.gif" alt="myImage.jpg" width="10" height="10" />

然后可以使用javascript从alt属性中获取图像路径，并在加载时将其插入src属性中

这些图像应该是缩略图，对吗?因此，您通过HTML将大图像缩小到小尺寸。老实说，最好的方法是提供已经缩小的图像作为缩略图。

一种解决方案是使用一个小图像加载图像，并将其设置为所有图像的源，直到javascript加载相关图像。

<img src="loading.png" data-path="over.png" height="50" alt="Over" width="150">

你可能想看看jQuery异步图像加载器JAIL:

虽然它可能比你需要的稍微多一点，但它有很多可用的选项，而且你必须编写的代码更少!

相关文章：