在继续脚本之前等待图像完全加载的JavaScript [英] JavaScript waiting until an image is fully loaded before continuing script

问题描述

我一直在寻找很多JavaScript答案，但我还没有找到真正解决我问题的答案。我要做的是加载图像，抓取像素数据，执行分析，然后加载另一个图像以重复该过程。

I've been looking around a lot of JavaScript answers but I haven't found one that really answers my problem yet. What I'm trying to do is load an image, grab the pixel data, perform an analysis, and then load another image to repeat the process.

我的问题是我无法预加载所有图像，因为此脚本必须能够处理大量图像，并且预加载可能太耗费资源。所以我每次都试图通过一个循环来加载一个新的图像，但是我在图像加载和脚本之间遇到了一个竞争条件，将它绘制到画布的上下文中。至少我很确定这是发生了什么，因为脚本将在预先加载图像时正常工作（例如，如果我先前在加载页面后刷新）。

My problem is that I can't preload all of the images because this script has to be able to work on large amounts of images and preloading could be too resource heavy. So I'm stuck trying to load a new image each time through a loop, but I'm stuck with a race condition between the image loading and the script drawing it to the canvas's context. At least I'm pretty sure that's what is happening because the script will work fine with the images precached (for example if I refresh after loading the page previously).

As你会看到有几行代码被注释掉了，因为我对JavaScript非常不熟悉并且他们没有像我想象的那样工作，但如果我以后需要这些功能，我不想忘记它们。

As you'll see there are several lines of code commented out because I'm incredibly new to JavaScript and they weren't working the way I thought they would, but I didn't want to forget about them if I needed the functionality later.

这是我认为会导致问题的代码片段：

This is the snippet of code that I believe is giving rise to the problem:

编辑：所以我在遵循建议后让我的功能工作

So I got my function to work after following a suggestion

 function myFunction(imageURLarray) {
  var canvas = document.getElementById('imagecanvas');
  console.log("Canvas Grabbed");

  if (!canvas || !canvas.getContext) {
    return;
  }

  var context = canvas.getContext('2d');

  if (!context || !context.putImageData) {
    return;
  }

  window.loadedImageCount = 0;
  loadImages(context, canvas.width, canvas.height, imageURLarray, 0);
}

function loadImages(context, width, height, imageURLarray, currentIndex) {
  if (imageURLarray.length == 0 || imageURLarray.length == currentIndex) {
    return false;
  }
  if (typeof currentIndex == 'undefined') {
    currentIndex = 0;
  }

  var currentimage = new Image();
  currentimage.src = imageURLarray[currentIndex];

  var tempindex = currentIndex;
  currentimage.onload = function(e) {

    // Function code here

    window.loadedImageCount++;

    if (loadedImageCount == imageURLarray.length) {

      // Function that happens after all images are loaded here
    }
  }
  currentIndex++;
  loadImages(context, width, height, imageURLarray, currentIndex);
  return;
}

推荐答案

也许这会有所帮助：

currentimage.onload = function(e){
    // code, run after image load
}

如果需要等待图像加载，以下代码将加载下一个图像（currentIndex是你的img变量）：

If it is necessary to wait for the image to load, the following code will load the next image (currentIndex is your "img" variable):

var loadImages = function(imageURLarray, currentIndex){
    if (imageURLarray.length == 0 || imageURLarray.length == currentIndex) return false;
    if (typeof currentIndex == 'undefined'){
       currentIndex = 0;
    }
    // your top code
    currentimage.onload = function(e){
        // code, run after image load
        loadImages(imageURLArray, currentIndex++);
    }
}

而不是for循环，例如使用这个函数：

Instead of a "for" loop, use for example this function:

loadImages(imageURLarray);

这篇关于在继续脚本之前等待图像完全加载的JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！