0

我试图在 IE Mobile 中显示一张又一张的图像。以下代码在 IE Desktop 中有效，但如果我在 IE Mobile 中运行它，则会收到 [对象错误]。

这是代码：

<!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 回答