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 1}}属性有效（您可能希望放置加载图像的路径）。

Answer 2

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

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

Answer 3

在调用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属性。

Answer 4

那些图像应该是缩略图，对吗？所以你要通过HTML将大图像缩小到小尺寸。老实说，最好的方法是以缩略图的形式提供缩小尺寸的图像。

Answer 5

您可能需要查看JAIL，jQuery Asynchronous Image Loader：

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