检查是否加载了多个图像

Question

我正在使用html5的canvas功能。我有一些图像要在画布上绘制，我需要检查它们是否已全部加载，然后才能使用它们。

我已在数组中声明它们，我需要一种方法来检查它们是否已同时加载，但我不知道如何执行此操作。

这是我的代码：

var color = new Array();
color[0] = new Image();
color[0].src = "green.png";
color[1] = new Image();
color[1].src = "blue.png";

目前要检查图像是否已加载，我必须像这样一张一张地执行：

color[0].onload = function(){
//code here
}
color[1].onload = function(){
//code here
}

如果我有更多图像，我稍后将在开发中，这将是一种非常低效的方法检查他们全部。

我如何同时检查它们？

Answer 1

如果您想在加载所有图像时调用一个函数，您可以尝试以下操作，它对我有用

var imageCount = images.length;
var imagesLoaded = 0;

for(var i=0; i<imageCount; i++){
    images[i].onload = function(){
        imagesLoaded++;
        if(imagesLoaded == imageCount){
            allLoaded();
        }
    }
}

function allLoaded(){
    drawImages();
}

Answer 2

难道不能简单地使用循环并将相同的函数分配给所有加载吗？

var myImages = ["green.png", "blue.png"];

(function() {
  var imageCount = myImages.length;
  var loadedCount = 0, errorCount = 0;

  var checkAllLoaded = function() {
    if (loadedCount + errorCount == imageCount ) {
       // do what you need to do.
    }
  };

  var onload = function() {
    loadedCount++;
    checkAllLoaded();
  }, onerror = function() {
    errorCount++;
    checkAllLoaded();
  };   

  for (var i = 0; i < imageCount; i++) {
    var img = new Image();
    img.onload = onload; 
    img.onerror = onerror;
    img.src = myImages[i];
  }
})();

Answer 3

使用当所有图像和外部资源加载时触发的window.onload：

window.onload = function(){
  // your code here........
};

因此，您可以安全地放置与图像相关的代码在 window.onload 中，因为此时所有图像都已加载。

更多信息请点击此处。

Answer 4

使用 Promise 的解决方案是：

const images = [new Image(), new Image()]
for (const image of images) {
  image.src = 'https://picsum.photos/200'
}

function imageIsLoaded(image) {
  return new Promise(resolve => {
    image.onload = () => resolve()
    image.onerror = () => resolve()
  })
}

Promise.all(images.map(imageIsLoaded)).then(() => {
  alert('All images are loaded')
})

Answer 5

一种 hackish 方法是将 JS 命令添加到另一个文件中并将其放在页脚中。这样它会最后加载。

然而，使用 jQuery(document).ready 也比原生 window.onload 效果更好。

您正在使用 Chrome，不是吗？

Answer 6

仅 for 循环 中的 onload 方法无法解决此任务，因为 onload 方法在循环中异步执行。因此，如果您仅对循环中的最后一个图像进行某种回调，则可能会跳过循环中间的较大图像。

您可以使用 Async Await 链接循环以同步跟踪图像加载。

function loadEachImage(value) {
   return new Promise((resolve) => {
      var thumb_img = new Image();
      thumb_img.src = value;
      thumb_img.onload = function () {
         console.log(value);
         resolve(value); // Can be image width or height values here
      }
   });
}

function loadImages() {
   let i;
   let promises = [];

   $('.article-thumb img').each(function(i) {
      promises.push(loadEachImage( $(this).attr('src') ));
   });

   Promise.all(promises)
      .then((results) => {
          console.log("images loaded:", results); // As a `results` you can get values of all images and process it
      })
      .catch((e) => {
         // Handle errors here
      });
}

loadImages();

但这种方法的缺点是它增加了加载时间，因为所有图像都是同步加载的。

---

您还可以使用简单的 for 循环 并在每次迭代后运行回调来更新/处理最新加载的图像值。这样您就不必等待只有在最大图像之后才加载较小图像的情况。

var article_thumb_h = [];
var article_thumb_min_h = 0;

$('.article-thumb img').each(function(i) {
   var thumb_img = new Image();
   thumb_img.src = $(this).attr('src');
   thumb_img.onload = function () {
      article_thumb_h.push( this.height ); // Push height of image whatever is loaded
      article_thumb_min_h = Math.min.apply(null, article_thumb_h); // Get min height from array
      $('.article-thumb img').height( article_thumb_min_h ); // Update height for all images asynchronously
   }
});

---

或者只是使用这种方法在所有图像加载后进行回调。

这完全取决于您想做什么。希望它会对某人有所帮助。

Answer 7

试试这个代码：

<div class="image-wrap" data-id="2">
<img src="https://www.hd-wallpapersdownload.com/script/bulk-upload/desktop-free-peacock-feather-images-dowload.jpg" class="img-load" data-id="1">
<i class="fa fa-spinner fa-spin loader-2" style="font-size:24px"></i>
</div>

<div class="image-wrap" data-id="3">
<img src="http://diagramcenter.org/wp-content/uploads/2016/03/image.png" class="img-load" data-id="1">
<i class="fa fa-spinner fa-spin loader-3" style="font-size:24px"></i>
</div>
<script type="text/javascript">
    jQuery(document).ready(function(){
        var allImages = jQuery(".img-load").length;
        jQuery(".img-load").each(function(){
            var image = jQuery(this);
            jQuery('<img />').attr('src', image.attr('src')).one("load",function(){
                var dataid = image.parent().attr('data-id');
                console.log(dataid);
                 console.log('load');
            });
        });

    });

</script>