Holder.js - return a DOM element?

Question

holder.js

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

Inserting it also does not work:

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

Since the holder of the script is already running and is not looking for new elements.

We can, however, start it again manually:

 Holder.run() 

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

So ... is there a way I can get holder.js to create and return to me the DOM element so that I can add it manually without restarting all this?

Answer 1

Pass Node as the images property in Holder.run , and you can run Holder on any single image. The holder itself does not 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"); 

Here is an example: http://jsfiddle.net/imsky/p3DMa/