javascript onload event in a loop

Question

I am trying to loop through an json array of images, adding the images to a marker on map. As javascript is asynchronous it is causing me problems, I want to wait for the image to load before adding it to my map and cannot get my images to load before the loop finishes. Is this possible to achieve as I have tried to implement with callbacks but could not get this to work.

 for (var i = 0; i < jsonObj.potholes.length; i++)
 {  
      var image = new Image();



                image.src = "data:image/png;base64," + jsonObj.potholes[i].image;
                image.onload = function()
                {
                    //alert("image loaded");
                    EXIF.getData(image, function()
                    {
                        otn = parseInt(EXIF.getTag(image, "Orientation"));
                        dataURL = drawCanvas(otn, image).toDataURL();

                        var circle = L.circle([jsonObj.potholes[i].lat, jsonObj.potholes[i].lon], 18, {
                            color: 'yellow',
                            fillColor: 'red',
                            fillOpacity: 0.5
                        }).addTo(markersLayerGroup).bindPopup("Pothole ID " + jsonObj.potholes[i].id
                                + "<br />Location " + city[i] + "," + street[i] +
                                "<image src = '" + dataURL + "'></image>");


                    });



}

noseratio · Accepted Answer · 2014-02-16 22:40:05Z

You should implement an asynchronous loop (using if):

(function (ondone) {
    var index = 0;
    nextStep();

    function nextStep() {
        if (index >= jsonObj.potholes.length) {
            if (ondone)
                ondone();
            return;
        }

        var i = index++;
        var image = new Image();

        image.src = "data:image/png;base64," + jsonObj.potholes[i].image;
        image.onload = function () {
            //alert("image loaded");
            EXIF.getData(image, function () {
                otn = parseInt(EXIF.getTag(image, "Orientation"));
                dataURL = drawCanvas(otn, image).toDataURL();

                var circle = L.circle([jsonObj.potholes[i].lat, jsonObj.potholes[i].lon], 18, {
                    color: 'yellow',
                    fillColor: 'red',
                    fillOpacity: 0.5
                }).addTo(markersLayerGroup).bindPopup("Pothole ID " + jsonObj.potholes[i].id
                        + "<br />Location " + city[i] + "," + street[i] +
                        "<image src = '" + dataURL + "'></image>");

                nextStep();
            });
        }
    }
})(function () { alert("Done!"); });

You could also use Promises for that, for example: JavaScript: Async Promise "while loop".

stonyau · Accepted Answer · 2018-04-26 06:27:35Z

1

Hope it's not too late. There's another much simpler solution--Throw everything into another function.

for (var i = 0; i < jsonObj.potholes.length; i++) {  
    dataOnLoad("data:image/png;base64," + jsonObj.potholes[i].image);
}
function dataOnLoad(base64_data) {
    var image = new Image();
    image.src = base64_data;
    image.onload = function()
    {
        //alert("image loaded");
        EXIF.getData(image, function()
        {
            otn = parseInt(EXIF.getTag(image, "Orientation"));
            dataURL = drawCanvas(otn, image).toDataURL();

            var circle = L.circle([jsonObj.potholes[i].lat, jsonObj.potholes[i].lon], 18, {
                color: 'yellow',
                fillColor: 'red',
                fillOpacity: 0.5
            }).addTo(markersLayerGroup).bindPopup("Pothole ID " + jsonObj.potholes[i].id
                    + "<br />Location " + city[i] + "," + street[i] +
                    "<image src = '" + dataURL + "'></image>");


        });
}

answered Apr 26, 2018 at 6:27

stonyau

2,1921 gold badge21 silver badges18 bronze badges

1 Comment

The Codesee Over a year ago

This did make me laugh. 4 years later: "hope it's not too late". Neat solution though - worked for me and simple!

Collectives™ on Stack Overflow

javascript onload event in a loop

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related