Class instead of imagefile for src? about unveil

[quantizor]

If you left the default src empty, you could do something like this..

img.image[src=""] {
  background-image: url("your-placeholder.jpg");
}

Then when the src attribute is filled in by Unveil, the placeholder's properties are removed.

[luis-almeida]

I think nothing needs to be changed to allow this. You can add the classes you want to your images. Unveil doesn't care about that.
I would advise you not to leave images without a src since it's not valid and you'll be getting a bunch of errors in your console. Also some browsers will probably show the "missing image" thumbnail and it's gonna look pretty bad, firefox even renders the alt text (if you set it) as a link.

But there are workarounds. I haven't tested it but in these thread there seems to be some valid options:
http://stackoverflow.com/questions/5775469/whats-the-valid-way-to-include-an-image-with-no-src

If it works than you could do:

img.image[src="//:0"] {
  background-image: url("your-placeholder.jpg");
}

(not tested)

[universaldenmark]

You're right that actually works. But I would like to make different classes for different placeholders. How would that be possible?

[luis-almeida]

HTML:

<img class="image-1" src="//:0">
<img class="image-2" src="//:0">
<img class="image-3" src="//:0">

CSS:

.image-1[src="//:0"] {
  background-image: url("your-placeholder-1.jpg");
}
.image-2[src="//:0"] {
  background-image: url("your-placeholder-2.jpg");
}
.image-3[src="//:0"] {
  background-image: url("your-placeholder-3.jpg");
}

JS:

$(".image-1, .image-2, .image-3").unveil()

Not tested but that should work.

[luis-almeida]

I'm closing this issue as it doesn't seem to be valid anymore.
Let me know if otherwise.