动画HTML5横幅工作在除Safari以外的一切

Animate HTML5 banner working in everything but Safari

本文关键字：Safari HTML5 工作 动画      更新时间：2023-09-26

我在Animate CC中创建了一个横幅，您可以在这里看到：http://www.dctuk.it/test/trustpilotbanner.html

它在所有浏览器中都能正常工作。

但当我把它放在我们的测试版网站（一个asp.NET网站）上时，除了Mac上的Safari，它在任何地方都可以使用。它在Mac上的Firefox和Chrome上运行良好，但在Safari（或iPad）上运行不好，我不知道为什么。

你可以在网站底部附近看到它：[链接已删除]

有人知道为什么会这样吗？我想这可能与Animate无关，只是一个javascript冲突，但不确定？

干杯

Jon

在站点中，init()函数在接近底部的某个位置被覆盖：

<script type="text/javascript">
    if ( $(window).width() < 480) {     
        $( init );
        function init() {
            // Move the paragraph from #myDiv1 to #myDiv2
            $('#coloursnew').append( $('#imageholder') );
        }
    }
    else {
        //Add your javascript for small screens here
    }
</script>

在webkit中，即使这个函数在if语句中，它也会被评估，并替换您的banner init函数：

function init() {
    // --- write your JS code here ---
    canvas = document.getElementById("canvas");
    images = images||{};
    var loader = new createjs.LoadQueue(false);
    loader.addEventListener("fileload", handleFileLoad);
    loader.addEventListener("complete", handleComplete);
    loader.loadManifest(lib.properties.manifest);
}

这个问题的一个解决方案是替换像这样的小型设备的代码：

if ( $(window).width() < 480) {     
    init = function() {
        // Move the paragraph from #myDiv1 to #myDiv2
        $('#coloursnew').append( $('#imageholder') );
    };
}

下面是这个问题的一个示例JSFiddle。在不同的浏览器中尝试查看结果。

相关文章：