Question

我有以下机制，一直尝试加载图像，重试之间有一段延迟，最多10次尝试。

<img onerror ="imgError(this);" />

<script type='text/javascript'>
  function imgError(image) {
    if (!image.hasOwnProperty('retryCount')){
      image.retryCount = 0;
    }

    if (image.retryCount < 10){
      setTimeout(function (){
          image.src += '?' + +new Date;
          image.retryCount += 1;
      }, 1000);
    }
  }
</script>

这很有效，唯一的问题是第一次显示图像无法加载错误图标。这很难看，如下面的截图所示。

几秒钟后，当图像弹出时（使用AWS lambda从较大的图像生成缩略图），它会被加载并成功显示。

我的问题是如何避免丑陋的中间破碎图像图标显示？我希望无论是什么都不显示，或者有些文字说“生成缩略图......”。

Answer 1

您可能希望将临时占位符图像作为原始来源，尝试在背景中加载实际图像，并在其可用时将其注入。

以下代码还包括全局超时，以便考虑服务器和网络延迟。

<html>
<script type='text/javascript'>
  function loadImage(id, src) {
    var ts = Date.now(), img = new Image;

    img.onerror = function() {
      if(Date.now() - ts < 10000) {
        setTimeout(function() { img.src = src; }, 1000);
      }
    }
    img.onload = function() {
      document.getElementById(id).src = src;
    }
    img.src = src;
  }
</script>

<img id="myImage" src="placeholder.png" />
<script>loadImage("myImage", "whatever.png");</script>
</html>

但是，对于每次失败的尝试，您仍然会在控制台中显示404错误。所以，如果可能的话，你真的应该考虑服务器端修复 - 正如已经建议的那样。

Answer 2

你可以像这样使用不透明度

function showme(elem)
{
$(elem).css("opacity",1)
}
function imgError(image) {
    if (!image.hasOwnProperty('retryCount')){
      image.retryCount = 0;
    }

    if (image.retryCount < 10){
      setTimeout(function (){
          image.src += '?' + +new Date;
          image.retryCount += 1;
      }, 1000);
    }
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img style="opacity:0" onload="showme(this)" onerror ="imgError(this);" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRIqW6zLho0lKtLBP3J5izulhQhTsKyl2L-a1LC9vtidlQRK3ogQQ" />

继续尝试重新加载图像直到成功，但不显示中间损坏的图像图标

2 个答案: