Jquery Fade in background-image on dynamically created div

Question

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))
                        }
                    }
                  });
              }

score 1 · Answer 1 · answered Aug 24 '13 at 01:01

1

This plugin can be usefull. It provides useful callbacks once descendant images have loaded.

https://github.com/alexanderdickson/waitForImages

$('selector').waitForImages({
    finished: function() {
        // called once all descendent images have loaded
    },
    each: function() {
       // will be called for each image that is loaded
    },
    waitForAll: true // To check for images referenced in the CSS (background-image, list-style-image, border-image, border-corner-image)
});

answered Aug 24 '13 at 01:01

Fouad Fodail

2,653
1
16
16

Thanks for this. I'll have to check it out. I managed to find a solution using a preload script: http://stackoverflow.com/questions/8264528/image-preloader-javascript-that-supports-events/8265310#8265310 – user2712642 Aug 24 '13 at 11:38

Scott Sauyet · Answer 2 · 2013-08-24T00:16:07.140

This is totally untested, but you might be able to do this like this:

var photo = pic_data[2];
var width = pic_data[3];
var height = pic_data[4];
var image = new Image();
image.src = "thumbs/" + photo;
image.onload = function() {
    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))
});

Jquery Fade in background-image on dynamically created div

2 Answers2