Question

我对Javascript相当缺乏经验，但我一直在努力做一些不觉得应该这么难的事情。我正在尝试让我的脚本检查已加载的图像以查看它是否有效（不是丢失的文件），如果缺少，则将图像数组重置为项目0并重复，因为我可以假设它具有当遇到丢失的文件时，dir中的可用图像结束。

我需要在本地目录中为幻灯片显示保留几个硬编码的图像名称，但是如果有比图像更多的保留名称，我需要它重置而不是显示损坏的图像。

我不能使用PHP或HTML5来获得更直接和动态的解决方案。我尝试了几次尝试，我只是出于想法。任何帮助，将不胜感激。谢谢。

    <!DOCTYPE html>
<html>
    <head>
        <title>Monitor Display<title>
        <script src="jquery-1.10.2.min.js"></script>
        <base href="file://c:/LocalDir/"/>


        <!-- CSS -->
        <style>
            .images { 
                position:relative; margin:-8px; max-width:100%; height:auto;}
            .images img { 
                position:absolute; left:0; top:0; margin:-8px; max-width:100%; height:auto;}
            body {
                background-color:rgb(51,51,51);}
        </style>
    </head>

<body>
    <!-- Animation -->
    <script>

    $(document).ready(function(){
        changeImage();
    });

    function changeImage() {
        var img = $('.images img');

        if(x >= (images.length-1)) { 
            x = 0;
        }
        else
        {
            x++;
        }

        img[0].src = images[x];
        setTimeout("changeImage()", 5000);
    }

    var images = [],
    x = 0;

    images[0] = "ThumbChart0big.png";
    images[1] = "ThumbChart1big.png";
    images[2] = "ThumbChart2big.png";
    images[3] = "ThumbChart3big.png";
    </script>   
    <!-- Image Container -->
    <div class="images">
        <img src="ThumbChart1big.png"/>
    </div>

</body>

</html>

Answer 1

你可以使用.error（）：

....
var x = 0;
function changeImage() {
    var img = $('.images img');
    img.error( function() {
      x = 0;  // reset the array index
    });
   //continue...

使用JS重置显示图像数组时检测到损坏的图像

1 个答案: