javascript - jQuery 在 Action 发生后加载脚本

Question

我正在为我的网站创建一个介绍页面，前 5 秒显示 <div class="splash_container">然后 5 秒后我想显示 <div class="canvas_container">

我设法通过用 css 隐藏第二个 div 然后使用以下 jquery 显示它们来做到这一点

jQuery(document).ready(function(){
    jQuery('.splash_container').delay(5000).fadeOut();
    jQuery('.canvas_container').delay(5500).fadeIn();

});

我遇到的问题是 .canvas_container包含一个我创建的 html5 canvas 动画，它需要在 div 可见时启动 - 在那一刻，它在页面加载时启动，所以当它显示时它已经进入动画 5500 毫秒。

有没有办法延迟我的 Canvas 动画脚本的加载？

这是我 Canvas 的脚本:

var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var counter = 0;
    var completeCycle = [0];
    var leftColumn = ["word1", "word2", "word3", "word4", "word5", "word6", "word7"];
    var rightColumn = ["word1", "word2", "word3", "word4", "word5", "word6", "word7"];


    var a = [1,2,3,4,5,6];
    var b = [0,1,2,3,4,5,6];
    newOrder();
    loop();


function loop() {
if (counter > completeCycle.length) {
    counter = 1;
    newOrder();
    //console.log(completeCycle);
    setTimeout(function() {
        context.clearRect(50, 0, 180, 400); // clears the animation
        setTimeout(loop, 200);   // start it up again
    }, 5000);     // but wait a second
} else {
    drawLine(counter,context);
    counter++;
    setTimeout(loop, 100);

}
}  // start the loop immediately



    function newOrder()
    {
        a = shuffleUp(a);
        b = shuffleUp(b);

        //complete array, just because I can:
        completeCycle = [0];
        for (var i = 0; i < a.length; i++)
        {
            completeCycle.push((b[i] * 2)+1);
            completeCycle.push(a[i]*2);
        }
        completeCycle.push((b[6]* 2)+1);
        //console.log(b);
        console.log(completeCycle);


    }


    //This function uses the "Fisher-Yates shuffle"
    //More information about this: http://bost.ocks.org/mike/shuffle/
    function shuffleUp(array)
    {
        var m = array.length, t, i;

        // While there remain elements to shuffle…
        while (m) {

        // Pick a remaining element…
        i = Math.floor(Math.random() * m--);

        // And swap it with the current element.
        t = array[m];
        array[m] = array[i];
        array[i] = t;
        }

        return array;
    }

    function moveToPos(whichOne, context) {
        //Change the '5 +' to offset more/less from top.

        var yLoc = (whichOne % 2 == 0) ?
            5 + (whichOne / 2) * 30 :
            5 + ((whichOne - 1) / 2) * 30;

        context.moveTo(
            (whichOne % 2 == 0) ? 55 : 220
            ,yLoc);//,2 + (whichOne / 2) * 30);
    }

    function drawToPos(whichOne, context) {
        //Change the '5 +' to offset more/less from top.
        var yLoc = (whichOne % 2 == 0) ?
            5 + (whichOne / 2) * 30 :
            5 + ((whichOne - 1) / 2) * 30;


        context.lineTo(
            (whichOne % 2 == 0) ? 55 : 220
            ,yLoc);//, 2 + ((whichOne) / 2) * 30);
    }


    function drawLine(counter, context) {

        context.beginPath();

        //Move to the last point position...
        moveToPos(completeCycle[counter - 1],context);
        drawToPos(completeCycle[counter], context);
        //console.log(completeCycle);
        // Stroke Style
        context.lineWidth = 2;
        context.strokeStyle = '#FFFFFF';
        context.lineCap = 'round';
        context.stroke();
    }


        // Create words
        // LEFT WORDS
        context.font = 'normal 12px Menlo';
        context.fillStyle = 'white';


        for (var i = 0; i < 7; i++)
        {
            context.fillText(leftColumn[i], 0, 10 + (i*30));
            context.fillText(rightColumn[i], 240, 10 + (i*30));
        }

脚本与 div 内联添加(即不作为外部资源加载)。

Answer 1

您的脚本被编写为“在加载时运行”。如果操作的开始时间很关键，则永远不要依赖脚本加载时间。

将该脚本更改为函数库(从外部启动)。例如将这部分代码放在另一个函数中:

// Global vars outside all functions
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var counter = 0;
var completeCycle = [0];
var leftColumn = ["word1", "word2", "word3", "word4", "word5", "word6", "word7"];
var rightColumn = ["word1", "word2", "word3", "word4", "word5", "word6", "word7"];
var a = [1,2,3,4,5,6];
var b = [0,1,2,3,4,5,6];

function startup(){
    newOrder();
    loop();
}

并调用动画完成:

jQuery(document).ready(function(){
    jQuery('.splash_container').delay(5000).fadeOut();
    jQuery('.canvas_container').delay(5500).fadeIn(startup);

});

然后您的脚本就会像任何其他库一样预先加载。