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

Answer 2

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

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

Answer 3

我设法在stackoverflow上使用别人的预加载函数找到解决方案：Image preloader javascript that supports events

这是我的代码，此功能已集成并略有改动。感谢大家的回应！你可以在这里看到它：http://www.aslamhusain.com/design.php#id=set_Lauren_Pisano

     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+"' style='display:none'><h2>"+gallery+"</h2></div>")
                            //split ajax data
                            window.pic_array = data.split("***");
                            var imageSrcs = new Array();
                            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+")",
                                      display:""
                                  }
                               })
                               new_div.appendTo($("#"+gallery_id))
                               imageSrcs[i] = "thumbs/"+photo;
                               var images = [];

                            }
                            preloadImages(imageSrcs, images, function(){
                                console.log(gallery_id)
                                $("#"+gallery_id).fadeIn("slow")
                            });
                        }
                      });
                  }

function preloadImages(srcs, imgs, callback) {
    var img;
    var remaining = srcs.length;
    for (var i = 0; i < srcs.length; i++) {
        img = new Image();
        img.onload = function() {
            --remaining;
            if (remaining <= 0) {
                callback(srcs);
            }
        };
        img.src = srcs[i];
        imgs.push(img);
    }
}

Jquery在动态创建的div中淡入背景图像

3 个答案: