Holder.js -- Get back DOM element?

Question

holder.js

I want to dynamically add a placeholder image to my page.

Inserting it like so doesn't work:

$('<li>',{class:'file-item'})
    .append($('<img>',{'data-src':'holder.js/150x150'}))
    .append($('<span>',{class:'file-name'}).text(file.name))
    .appendTo('#file-list');

Because the holder script has already ran and isn't searching for new elements.

We can, however, run it again manually:

Holder.run()

But then it will scan all the elements that are already added.

So...is there way I can get holder.js to create and give me back a DOM element so I can add it manually without re-running the whole thing?

Answer 1

Pass a Node as the images property to Holder.run and you'll be able to run Holder on any individual image. Holder itself doesn't create a DOM element, it just changes the src value.

Code:

var image = $("<img>").attr({
    "data-src": "holder.js/300x200"
})

Holder.run({
    images: image[0]
});

image.appendTo("body");

Live example here: http://jsfiddle.net/imsky/p3DMa/