我到处找过,但似乎找不到答案。。。我正在寻找一种方法来检查是否已经加载了动态创建的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))
}
}
});
}
这个插件是可以使用的。一旦加载了子映像,它就会提供有用的回调。
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)
});
这是完全未经测试的,但您可以这样做:
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))
});