發射功能完成

Question

我共熔誰，我應該在這種情況下使用回調：

我和火displayHighlights（）highlightImages後（）函數完成，所以我並不需要使用的setTimeout（ ）

第一個函數是驗證如果圖像沒有引發錯誤，第二個只顯示其中三個。

<ul class="clear"> 
    <li style="display : none" class="highlight-photos"><a class="highlight_photo"></a></li> 
    <li style="display : none" class="highlight-photos"><a class="highlight_photo"></a></li> 
    <li style="display : none" class="highlight-photos"><a class="highlight_photo"></a></li> 
    </ul> 


function highlightImages() { 
    $(".highlight_photo").each(function() { 
     var fileName = $(this).data('url') 
     var image = new Image(); 
     var that = $(this); 
     image.onerror = badImage; 
     image.src = fileName; 
     function badImage(event) { 
      var el = $(".highlight_photo[data-url='" + fileName+ "']"); 
      el.parent().remove(); 
     } 
    }); 
setTimeout(function(){displayHighlights();},500); 
}; 

function displayHighlights() { 
    if ($(".highlight_photo").parent().length <= 3) { 
     $(".highlight-photos").show(); 
    } else { 
     $("ul.clear li:lt(3)").addClass("visible"); 
     $(".highlight-photos").not(".visible").remove(); 
     $("ul.clear li:lt(3)").show(); 
    } 
} 

Answer 1

一個解決方案是將onlaod事件添加到所有圖像。

所以當添加圖像增加一個計數器就像：圖像加載。

之前!!!將src屬性添加到圖像附加onload處理程序，這將減少相同的計數器。

var images_loading = 0; //setting the counter 

function highlightImages() { 
    $(".highlight_photo").each(function() { 
     var fileName = $(this).data('url') 
     var image = new Image(); 
     var that = $(this); 
     image.onerror = badImage; 
     images_loading++; //yuou are loading one more image 
     image.onload = function(){images_loading--; //when it is loaded, it is ok} 
     image.src = fileName; 
     function badImage(event) { 
      images_loading--; //if it fails, remove from loading 
      var el = $(".highlight_photo[data-url='" + fileName+ "']"); 
      el.parent().remove(); 
     } 
    }); 
    var can_highlight = false; 
    while(!can_highlight){ 
     if(images_loading == 0){ 
      //all the images are loaded 
      can_highlight = true; 
      displayHighlights(); 
     } else { 
      setTimeout(1) //sparing cpu 
     } 
    } 
}; 

Answer 2

我會嘗試使用您的每條語句的承諾。

例如：

的JavaScript：

$.when(highlightImages()).done(function() { 
    console.log('highlightImages complete!'); 
    displayHighlights(); 
}); 


function highlightImages() { 
    $(".highlight_photo").each(function (key, val) { 
     console.log(val); 
    }); 
}; 

function displayHighlights() { 
    console.log('displayHighlights called'); 
}; 

JSFiddle

Answer 3

您還可以使用jQuery延遲功能描述here

最好

M