0

IE Mobile で次々と画像を表示しようとしています。次のコードは IE デスクトップでは機能しますが、IE モバイルで実行すると [オブジェクト エラー] が発生します。

これはコードです：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
  <script type="text/javascript">
       var interval = 30;
       var _timer;
       var _index = 0;
   </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <a href="#" title="Play Motion Clip from Beginning" onclick="test();">
            <img alt="Play Motion" src="../Images/play_green_controls.png" style="border-style: none; width: 32px; height: 32px; background-color: #000000; cursor: pointer;" id="btnPlay" />
        </a>
        <img alt="" src="../0000.jpg" id="imgLive" />
        <div id="divImage" style="width: 352px; height: 288px; display: none; background-image: url('Portal/Catalogues/000EC902F17F/3/2013/10/6/10/60b01a71-27f9-4122-ae8e-674e65a8b4dd/20131006102041027x75x0.04x0.40x.img00001.jpg');
            background-repeat: no-repeat;">
        </div>
        <div id="divImageCache1" style="width: 352px; height: 288px; display: none;">
            <img alt="" src="../0000.jpg" id="imgCached" />
        </div>
    </div>
    </form>

    <script type="text/javascript">
        function test() {
            try {
                _timer = setInterval(swapImages(), interval);
            }
            catch (e) {
                alert(e);
            }
        }
        var imgCached = document.getElementById('imgCached');
        var imgLive = document.getElementById('imgLive');

        function OnImgLoaded() {
            imgLive.src = imgCached.src;
        }

        function swapImages() {
            imgCached.onload = OnImgLoaded();
            imgCached.src = 'my irl/' + '0000' + _index + '.jpg';
            _index = _index + 1;
            if (_index == 10) {
                _index = 0;
                clearTimeout(_timer);
            }
        }
       </script>
       </body>
</html>

デバッグするために、JavaScript を次のように変更しました。

<script type="text/javascript">
        function test() {
            try {
                alert('hi1');
                _timer = setInterval(swapImages(), interval);
                alert('hi2');
            }
            catch (e) {
                alert(e);
            }
        }
        var imgCached = document.getElementById('imgCached');
        var imgLive = document.getElementById('imgLive');

        function OnImgLoaded() {
            imgLive.src = imgCached.src;
        }

        function swapImages() {
            alert('hi3');
            imgCached.onload = OnImgLoaded();
            imgCached.src = 'http://www.url.co.uk/Cloud/test/' + '0000' + _index + '.jpg';
            _index = _index + 1;
            if (_index == 10) {
                _index = 0;
                clearTimeout(_timer);
            }
            alert('hi4');
        }
       </script>

何が起こったかというと、'hi1'、'hi3'、'hi4' の後にオブジェクト エラーが発生しました。イメージの DID が一度変更されました。

4

1 に答える 1

2

関数をsetIntervalに割り当てるのではなく、関数を呼び出して、それが返すものをすべて割り当てています。

あなたのコード

_timer = setInterval(swapImages(), interval);

実際にこれをやっている

_timer = setInterval(undefined, interval);

()関数を呼び出さないように、コードで を削除する必要があります。

_timer = setInterval(swapImages, interval);

ここでもそれを行いました：

imgCached.onload = OnImgLoaded();

個人的には間隔を使用しません。画像は 30 ミリ秒で読み込まれません。画像が読み込まれた後にタイムアウトします。このようなものがうまくいくでしょう。

var isRunning,
    timer,
    intervalMS = 30,
    imgLive = document.getElementById('imgLive');

function test() {
    _index = 0;
    isRunning = true;
    if (timer) window.clearTimeout(timer);
    swapImages();
}

function setImageSrc (src) {
    imgLive.src = src;
    if(isRunning) timer = window.setTimeout(swapImages, intervalMS);        
}

function swapImages() {
    var imgCached = new Image();
    imgCached.onload = function() { 
        setImageSrc(this.src);
    };
    imgCached.onerror = function() { 
        setImageSrc("Error.jpg");
    }; 
    imgCached.src = 'http://www.informedmotion.co.uk/Cloud/test/' + '0000' + _index + '.jpg';
    _index = _index + 1;
    if (_index == 10) {
        isRunning = false;
    }
}
于 2013-10-17T12:35:33.010 に答える