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

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

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

2 个答案: