如何在循环中显示一个图像?

时间:2014-03-30 02:14:14

标签: javascript jquery asp.net-mvc asp.net-mvc-4 razor

我试图在循环中显示一个图像。知道路径和图像名称是可以的,例如,如何在循环中显示一个图像,并且当找不到图像时,浏览器会显示最后一个右图像名称,直到找到图像名称?

@{int j=1;}
<img src="" />
<script>
    (function () {
        for (var i = 1; true; i++) {
            @{ string file = "/MonitoringN/../bitmaps/" + j + ".png"; bool a = System.IO.File.Exists(file) == true; }
            var str = "/MonitoringN/../bitmaps/" + i + ".png";
            var b = "@a";
            if (b)
            {
                setInterval(function () { $('img').prop('src', str); }, 1000);
            } else {
                i--;
                @{j--;}
            }
            @{j++;}
        }
    });
</script>

因为当我执行此代码时,我得到一张空白图片,然后我看不到页面正在加载。

非常感谢!

1 个答案:

答案 0 :(得分:0)

我想我知道你要做什么......

如果我正确理解了这个问题,你会有一个图像列表,并且你想尝试打开它们,直到找到其中一个图像。如果找不到图像,您想跳到下一个图像。

首先 - 我只是通过将Razor的东西和Javascript分离成非常独立的部分来解决您的问题。事实上,我完全会跳过Razor。

<html>
<head>
<title>A test</title>
</head>
<body>

<img src="http://x.invalid" id="myImage">

<script>
var imgs = [
  "http://x1.invalid/none",
  "https://www.google.com/images/srpr/logo11w.png",
  "http://thedailywtf.com/Resources/Images/Primary/logo.gif"
];


var imageIndex = 0;

function tryNextImage() {
  var img = document.getElementById("myImage");

  img.onerror = function() {
    imageIndex++;
    tryNextImage();
  }

  img.src = imgs[imageIndex];
}

// start the ball rolling
tryNextImage();

</script>

</body>
</html>