Question

所以我正在为一个我目前正在努力开发的离线网站提供一个有趣的想法。它会离线，因为它意味着要为以后的学习作业做练习等。

我的问题如下：我有一个javascript函数用GIF替换PNG，在动画之后应该将此人重定向到另一个html我＆＃39我做了。

JS动画的源代码主要是从这里获得的，但我似乎无法按照我原先的意图使它工作。

它目前的工作方式是我点击png然后它会变成一个gif（没问题）但我想要的是它运行我的js脚本然后重定向到另一个.html文件（网址）。

以下是我的HTML：

<object id="syringe">
            <img src="img/syringe.png" height="750" alt="img/syringe.gif" class="center">
            <h2>Click the syringe to inject yourself with a daily dose of puns and jokes</h2>
        </object>

以下是JS：

(function($) {

    var getGif = function() {
        var gif = [];
        $('img').each(function() {
            var data = $(this).data('alt');
            gif.push(data);
        });
        return gif;
    }

    var gif = getGif();

    var image = [];

    $.each(gif, function(index) {
        image[index]     = new Image();
        image[index].src = gif[index];
    });

    $('#syringe').on('click', function() {

        var $this   = $(this),
                $index  = $this.index(),

                $img    = $this.children('img'),
                $imgSrc = $img.attr('src'),
                $imgAlt = $img.attr('data-alt'),
                $imgExt = $imgAlt.split('.');

        if($imgExt[1] === 'gif') {
            $img.attr('src', $img.data('alt')).attr('data-alt', $imgSrc);
        } else {
            $img.attr('src', $imgAlt).attr('data-alt', $img.data('alt'));
        }

        $this.toggleClass('play');

    });
})(jQuery);

根据我的理解，我可以在js中添加延迟然后添加另一个函数 - 例如以下内容，这是我打算做的，但是无法完成。

[FUNCTION HERE],1000, 
           function(){
              window.location.href=myredirectionuri;
   });

这就是我的问题。

Answer 1

看起来你想让gif显示一两秒然后重定向，对吗？如果$this.toggleClass('play');结束，那么只需在它之后插入：

setTimeout(() => window.location.href = myredirectionuri, 1000);

等待1000毫秒，然后重定向到新页面。

Answer 2

在动画脚本中，在更改为gif后，插入

setTimeout(function() { /* redirect code */ }, /* length of gif in milliseconds */ )

运行javascript动画，然后重定向

2 个答案: