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

Question

我正在尝试创建一个函数，它将递归地尝试重新加载图像，直到它成功或达到最大尝试次数。我创建了这个功能，但是它不起作用（是因为对图像的引用发生了变化吗？）：

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 */
  }
}

使用方式如下：

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

它不是尝试加载 "testIMG.jpg" 四次，并在两次尝试之间等待，而是尝试加载两次，无论第二次是否成功，它都会显示错误消息.

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

Answer 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);

我前段时间为同一个案例写的一些代码。希望对你有帮助！

Answer 2

最后我用一个简单的（如果不优雅）方式解决了这个问题：

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

想法是，如果图像加载失败，在 canvas 上渲染它时会失败，从而产生错误。当出现这样的错误时，我们可以创建一个新的图像再试一次。

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

Trying to reload Image variable until successful or a max amount of attempts is reached

javascript

recursion

jquery

image

reload