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

這是完全未經測試，但你也許可以做到這一點是這樣的：

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 2

這個插件可以是有用的。一旦後代圖像加載，它提供有用的回調。

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 3

我設法找到使用計算器上別人的預載功能的解決方案：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); 
    } 
}