Friday, 23 August 2013

Jquery Fade in background-image on dynamically created div

Jquery Fade in background-image on dynamically created div

I've searched everywhere, but can't seem to find an answer to this... I'm
looking for a way to check if a dynamically created div's background image
has loaded.
I have built a photo gallery that first makes an ajax call and then
creates divs with background images to display thumbnails of all the
photos in the gallery. You can check it out here:
http://www.aslamhusain.com/design.php#id=set_Allison_Basha
I would like to find a way to fadein each div when it loads, but I can't
find a way to check if the background image has loaded. Is this even
possible? Your help is much appreciated! First time posting here, this
site has always been a lifesaver for me!! Thanks in advance,
Here is the code:
if($("#"+gallery_id).length<=0){
$.ajax({
url: "get_photos.php?gallery="+gallery,
success: function(data){
//create gallery div
$("#wrapper").append("<div class='page'
id='"+gallery_id+"'><h2>"+gallery+"</h2></div>")
//sort ajax data
window.pic_array = data.split("***");
var total_images = window.pic_array.length - 1;
for(i=0;i<total_images;i++){
var pic_data = window.pic_array[i].split("|")
var date = pic_data[0] ;
var comment = pic_data[1];
var photo = pic_data[2];
var width = pic_data[3];
var height = pic_data[4]
var new_div = $("<div/>", {
id: "image_"+i,
class: "thumbnail_div",
click: Function("float_image('"+i+"')"),
css: {
backgroundImage: "url(thumbs/"+photo+")",
}
})
new_div.appendTo($("#"+gallery_id))
}
}
});
}

No comments:

Post a Comment