Generate placeholder with jquery .each()

[GlassGruber]

Hey there, as per title I'm having trouble trying to find a way to generate a given number of placeholder images within some other elements selected with jQuery .each(). I need to generate them 1 by 1, so the given option for a selector in the .addImage() method kinda trip me up, since it will load them all at once in every element. I'm quite a novice so maybe I'm missing something obvious.

Maybe I should create the jQuery elements with data-src before and then run hodler.js?

Thank you for this great script btw! :D

[imsky]

Good point, this will be fixed in addImage so that you'll be able to pass in a DOM node.

In the meantime, the second option you proposed is the recommended way of solving this: http://jsfiddle.net/brg6sdm1/

$(function () {
    $('div').each(function (index, el) {
        var img = $('<img/>').attr({
            'data-src': 'holder.js/300x200?text=' + index
        });
        $(el).append(img);
        Holder.run({images: img.get(0)});
    });
});

[GlassGruber]

Great! Thank you also for the example, helped me a lot really! ;)

[imsky]

This is now implemented. The example code can be shortened to:

$(function () {
    $('div').each(function (index, el) {
        Holder.addImage('holder.js/300x200?text' + index, el).run();
    });
});