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画布动画，需要在div可见时启动 - 此时它会从页面加载开始，所以当它显示时它是5500ms进入动画。

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

这是我的画布的脚本：

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

您的脚本将写入＆＃34;在加载时运行＆＃34;。如果操作的开始时间很重要，则不应该依赖于脚本加载时间。

将该脚本更改为函数库（从外部开始）。例如将这部分代码放在另一个函数中：

// 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);

});

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

jQuery在动作发生后加载脚本

1 个答案: