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

我有如下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实现它

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

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

---

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

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

---

然后，您可以使用javascript从

alt

属性中获取图像路径，并在加载时将其插入

src

属性中。

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

如果将数据放在某个地方是您唯一的问题，HTML5支持

数据-

属性，允许您向元素添加任意属性。只要属性名称以

data-

开头，它就保持有效。例如：

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

这个特性虽然不是“有效的”HTML4，但在所有浏览器上仍然可以工作，因为标签上的未知属性被忽略（并保持原样）

不过，您也可以搜索一种仅使用JavaScript的方法。我真的不明白动态添加图像会如何破坏你的CMS

另外，

alt

属性对于图像是必需的（如果没有任何有用的东西可以写，请将其设置为空白），我不确定空白的

src

属性是否有效（您可能希望改为放置加载图像的路径）。

您可能希望签出jQuery异步图像加载程序：

---

虽然它可能比您需要的稍多，但它有很多可用的选项，您需要编写的代码也更少

您不能使用javascript加载它们，但要使用javascript加载它们吗？嗯？我认为最好的开始是接受你之前的一些答案。你不应该加载“相当大”的图像并以150*72的格式显示它们。在您的CMS中，必须有一些选项来创建缩略图。如果用户要求下载大图像（比如他点击缩略图），就让用户只下载大图像。我认为这是一个丑陋的黑客行为，ALT不支持。是的，这是一个黑客行为。我不知道HTML5的数据功能

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