1

我到处搜索，但似乎找不到答案...我正在寻找一种方法来检查是否已加载动态创建的 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))
                        }
                    }
                  });
              }
4

2 回答 2

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)
});
于 2013-08-24T01:01:39.763 回答
0

这是完全未经测试的，但你可以这样做：

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))
});
于 2013-08-24T00:09:52.283 回答