尝试重新加载Image变量，直到成功或达到最大尝试次数

I am trying to create a function that will recursively try to reload an image until it either is successful, or a maximum amount of attempts is reached. I have created this function, but it doesn't work (is it due to the fact that the reference to the image has changed?):

我正在尝试创建一个函数,它将递归尝试重新加载图像,直到它成功,或达到最大尝试次数。我已经创建了这个函数,但是它不起作用(是因为对图像的引用已经改变了吗?):

function reload (image, URL, maxAttempts)
{
image.onerror = image.onabort = null;

  if (maxAttempts > 0)
  {
    var newImg = new Image ();
    newImg.src = URL;
    newImg.onerror = image.onabort = reload (image, URL, maxAttempts - 1);
    newImg.onload = function () {
      newImg.onerror = newImg.onabort = null;
      image = newImg;
    }
  }
  else
  {
    alert ("Error loading image " + URL); /* DEBUG */
  }
}

Which is used in the following manner:

以下列方式使用:

var globalTestImage = new Image (); reload (globalTestImage, "testIMG.jpg", 4);

var globalTestImage = new Image(); reload(globalTestImage,“testIMG.jpg”,4);

Rather than it attempting to load "testIMG.jpg" four times, and waiting in between attempts, it instead tries to load it twice, and regardless of whether it was successful the second time around it will display the error message.

而不是尝试加载“testIMG.jpg”四次,并在两次尝试之间等待,而是尝试加载它两次,无论它是否成功,第二次它将显示错误消息。

What am I doing there? More precisely, why is it acting the way it is, rather than retrying to load the image 4 times?

我在那做什么?更准确地说,为什么它按原样行事,而不是重试加载图像4次?

2 个解决方案

#1

(function ($) {
    var retries = 5; //<--retries
    $( document).ready(function(){
        $('img').one('error', function() {
            var $image = $(this);
            $image.attr('alt', 'Still didn\'t load');
            if (typeof $image !== 'undefined') {
                if (typeof $image.attr('src') !== 'undefined') {
                    $image.attr('src', retryToLoadImage($image));
                }
            }
        });
    });

    function retryToLoadImage($img) {
        var $newImg = $('<img>');
        var $src = ($img.attr('src')) || '';
        $newImg.attr('src', $src);
        $newImg.one('error', function() {
            window.setTimeout(function(){
                if (retries > 0) {
                    retries--;
                    retryToLoadImage($newImg);
                }
            }, 1000); //<-retry interval
        });

        $newImg.one('load', function() {
            return $newImg.attr('src');
        });
    }
})(jQuery);

Some code I wrote for the same case a while ago. Hope it helps you!

我刚才为同一个案例编写了一些代码。希望它能帮到你!

#2

In the end I solve this issue in a simple (if inelegant) way:

最后,我以简单(如果不优雅)的方式解决了这个问题:

    try
    {
      canvas.getContext("2d").drawImage (testImage, 0, 0);
      backgroundLoaded = true;
    }
    catch (err)
    {
      testImage = new Image ();
      testImage.src = "placeholder.jpg";
    }

The idea is that if an image failed to load, it will fail when rendering it on the canvas, producing an error. When such an error happens, we can create a new image and try again.

我们的想法是,如果图像无法加载,则在画布上渲染时会失败,从而产生错误。发生此类错误时,我们可以创建新图像并重试。