[英]javascript onload event in a loop
I am trying to loop through an json array of images, adding the images to a marker on map. 我试图遍历图像的json数组,将图像添加到地图上的标记中。 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. 由于javascript是异步的,这给我带来了问题,我想等待图像加载后再将其添加到地图中,并且无法在循环完成前加载图像。 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>");
});
}
You should implement an asynchronous loop (using if
): 您应该实现一个异步循环(使用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" . 您也可以为此使用Promises,例如: JavaScript:Async Promise“ while loop” 。
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>");
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.