I am using this lovely plugin to show thumbs of image objects. To speed up the process and show the user a complete list immediately, I am initially generating the imagepicker for all objects with a place holder image and only then replace the thumb one by one. The problem is that after updating the data-img-src by jquery and re-init of imagepicker the select option does contain the correct data-img-src but the list item still contains the placeholder (except for the first object which displays with the correct image instead of the placeholder). Any ideas how to solve this?
$.each(photos_list, function(key, photo ) {
// add entry to imagepicker with placeholder thumb
$('#imagepicker').append(
$("<option>" , {
text: photo.name,
value: photo.object,
'data-img-src' : 'http://placehold.it/100x100&text=Loading+Image'
})
);
// replace placeholder thumb by real thumb
$('#imagepicker option[value="'+photo.data.object+'"]').attr('data-img-src','data:image/jpeg;base64,'+response);
// update imagepicker every 10 images
if (thumbcount%10==0) {
$("#imagepicker").imagepicker({
hide_select: true,
show_label: true
});
}
Of course I also call re-init of imagepicker at the drain event of the queue so it will display also the last images.
If I do the same but instead start with an empty list and add select options one by one with the final thumb it works fine.