javascript - Jquery 在动态创建的 div 上淡入背景图像

Question

我到处搜索，但似乎找不到答案...我正在寻找一种方法来检查动态创建的 div 的背景图像是否已加载。

我构建了一个照片库，它首先进行 ajax 调用，然后创建带有背景图像的 div 以显示图库中所有照片的缩略图。您可以在这里查看:http://www.aslamhusain.com/design.php#id=set_Allison_Basha

我想找到一种方法在每个 div 加载时淡入，但我找不到方法来检查背景图像是否已加载。这可能吗？非常感谢您的帮助!第一次在这里发帖，这个网站一直是我的救星!提前致谢，

这是代码:

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

Answer 1

这个插件很有用。一旦后代图像加载，它就会提供有用的回调。

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