Make html valid if adding new tag for <img>

I have html img list like this one:

<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" />

but these images are quite large. I need to make it that it will load one by one "like ajax". But I cant load it from ja开发者_JS百科vascript in the begining, becouse it is our cms desing like that and we will have big troubles if i will change it. So what i am planning to do is:

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

and load it one by one with javascript and replace src, but the html will not be valid. Can any one give me any solution how to implement it with valid html?

If putting the data somewhere is your sole problem, HTML5 supports data- attributes, which let you add arbitrary attributes to elements. It remains valid as long as the attribute name starts with data-. For instance:

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

This feature, while not "valid" HTML4, should still work on all browsers as unknown attributes on tags are simply ignored (and kept as is).

Though, you may also search for a way to do it only with JavaScript. I don't really understand how dynamically adding images could break your CMS.

Also, the alt attribute is required for images (make it blank if you don't have anything useful to write instead), and I'm not sure a blank src attribute is valid (you may want to put a loading image's path instead).

set a valid url in the image before you call the javascript function, for instance like this:

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

And as for the "path" attribute, you could put the link to the image in the alt attribute. That way your image tag will be valid.

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

Then you can use javascript to fetch the image path from the alt attribute, and insert it in the src attribute when loaded.

Those images should be thumbnails, correct? So you're downscaling large images via HTML to small sizes. The best way would be, honestly, to provide already downscaled images as thumbnails.

One solution is to have a small image loading image and set that as the source for all the images until your javascript has loaded the relevant image.

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

You may want to check out JAIL, the jQuery Asynchronous Image Loader:

While it may be slightly more than what you need, its got lots of options available and its less code you have to write!