Question

我很想知道在这种情况下我应该使用回调：

我和highlightImages（）完成后激活displayHighlights（）函数，所以我不需要使用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

您还可以使用here

所述的jquery延迟函数

最好

中号

第一个完成后的触发功能

3 个答案: