Question

我需要停止$ .each循环，加载图像然后继续循环。我有画布，我加载对象的图像。对象按正确顺序排列。现在，当我试图从数组中加载对象时，存在一个问题：由于尺寸不同，图像加载速度较慢或较快，并且它们在画布上进行绘制，例如按相反的顺序。我希望你能理解我，因为我的英语不是很好。祝你好运：）

    $.each(content,function(i){
        obj_id[i] = $.inArray( content[i], different_objects ) != -1 ? time == "day" ? content[i] + 'd' : content[i] : content[i];
        temp[i] = new Image();
        temp[i].src = '../data/img/objects/' + obj_id[i] + '.png?' + i;
        $(temp[i]).on('load', function() {
            city_cvs.drawImage({
                layer: true,
                source: '../data/img/objects/' + obj_id[i] + '.png?' + i,
                x: offset + x + content_pause, y: y - temp[i].height,
                fromCenter: false,
                opacity: opacity
            });

            offset = offset + temp[i].width + content_pause;
        });
    });

Answer 1

我建议您开始加载所有图像（以获得最佳性能）然后添加一些逻辑以确保在它们到达时按顺序绘制它们 - 绘制尽可能多的连续图像但尚未绘制在每个onload事件上。以下是如何做到这一点：

var images = [];
var lastDrawn = -1;
$.each(content,function(i){
    obj_id[i] = $.inArray( content[i], different_objects ) != -1 ? time == "day" ? content[i] + 'd' : content[i] : content[i];
    var img = new Image();
    // put empty image slot in the array
    images[i] = null;
    img.onload = function() {
        // mark this one as loaded now
        images[i] = this;
        // now draw all sequential images since lastDrawn that are ready
        // code will stop drawing when it encounters an image that is not yet ready
        for (var imageIndex = lastDrawn + 1; imageIndex < images.length; imageindex++) {
            // if the image in this slot is ready, draw it
            if (images[imageIndex]) {
                city_cvs.drawImage({
                    layer: true,
                    source: images[imageIndex].src,
                    x: offset + x + content_pause, y: y - images[imageIndex].height,
                    fromCenter: false,
                    opacity: opacity
                });
                // update the lastDrawn index
                lastDrawn = imageIndex;
            } else {
                // found an image that is not yet ready so stop drawing for now
                break;
            }
        }
    }
    // must set .src property AFTER the onload handler is set (IE will fire onload immediately if the image is cached
    img.src = '../data/img/objects/' + obj_id[i] + '.png?' + i;
});

Answer 2

通过在加载图像后递归调用函数：

(function loopFunction(i){

    obj_id[i] = $.inArray( content[i], different_objects ) != -1 ? time == "day" ? content[i] + 'd' : content[i] : content[i];
    temp[i] = new Image();
    temp[i].src = '../data/img/objects/' + obj_id[i] + '.png?' + i;
    $(temp[i]).on('load', function() {
        city_cvs.drawImage({
            layer: true,
            source: '../data/img/objects/' + obj_id[i] + '.png?' + i,
            x: offset + x + content_pause, y: y - temp[i].height,
            fromCenter: false,
            opacity: opacity
        });

        offset = offset + temp[i].width + content_pause;
        if(i<content.length) loopFunction(i++); // Call again
    });

})(0); // <-- i = 0

Answer 3

试试这个：

var counter=0;
function loading(i){
    obj_id[i] = $.inArray( content[i], different_objects ) != -1 ? time == "day" ? content[i] + 'd' : content[i] : content[i];
    temp[i] = new Image();
    temp[i].src = '../data/img/objects/' + obj_id[i] + '.png?' + i;
    $(temp[i]).on('load', function() {
        city_cvs.drawImage({
            layer: true,
            source: '../data/img/objects/' + obj_id[i] + '.png?' + i,
            x: offset + x + content_pause, y: y - temp[i].height,
            fromCenter: false,
            opacity: opacity
        });

        offset = offset + temp[i].width + content_pause;
    });
    counter++;
    if(content[counter].length!=0){
        content[counter].load(loading(counter));
    }
};
content[0].load(loading(counter));

停止$ .each，加载图像，然后继续循环

3 个答案: