Question

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

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

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

这是我认为引起问题的代码片段：

编辑：所以我在遵循建议

后让我的职能得以运作

 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;
}

Answer 1

也许这会有所帮助：

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

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

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”循环，例如使用此函数：

loadImages(imageURLarray);

Answer 2

也许试试这个：

http://jsfiddle.net/jnt9f/

在设置img src之前设置onload处理程序将确保即使图像被缓存也会触发onload事件

var $imgs = $(),i=0;
for (var img = 0; img < imageURLarray.length; img++) {
   $imgs = $imgs.add('<img/>');
}

var fctn = (function fctn(i){
    $imgs.eq(i).on('load',function(){
        //do some stuff
        //...
        fctn(++i);
    }).attr('src',imageURLarray[i]);    
})(0);

Answer 3

实际上......很多开发人员指的是在jQuery事件之后检测图像何时加载..

https://github.com/desandro/imagesloaded

如果您可以确定事件何时触发要加载的图像（例如，在图像开始加载之前在页面上添加Id或类），那么您应该能够将其与此插件混合使用在github上。

祝你好运！

在继续脚本之前等待图像完全加载的JavaScript

3 个答案: