javascript - 如何使用jquery优化页面加载

Question

当我减少生成雪花的值时，我创建了雪花

window.setTimeout(generateSnow, 1);  

或者如果我像这样增加循环中的雪花外观

// generate snow using a for loop
        for(i=0; i<20; i++){

....
....
}

通过使用此网页，有时会变慢，它会要求弹出窗口调试脚本或停止脚本。我不知道如何解决这个问题以便处理任意数量的薄片。或者我是否犯了一些错误？这是FIDDLE

编辑:

$(document).ready(function(){    

    // get the height and width of the browser window
    var windowHeight = $(window).height();
    var windowWidth = $(window).width();

    // set the height and width of the #snowingScreen div equivalent to that of the window's
    $('#snowingScreen').css('height', windowHeight);
    $('#snowingScreen').css('width', windowWidth);  


    // this function is to generate snow randomly scattered around screen
    function generateSnow() {

        // generate snow using a for loop
        for(i=0; i<4; i++){

            // randomize the top position of the snow
            var snowTop = Math.floor(Math.random()* (windowHeight/2) );     

            // randomize the left position of the snow
            var snowLeft = Math.floor(Math.random()* (windowWidth - 10) );  

            // appending the snow to the #snowingScreen
            $('body').append(

                // generate the div representing the snow and setting properties using various jQuery methods               
                $('<div />')
                    .addClass('snow')
                    .css('top', snowTop)
                    .css('left', snowLeft)
                    .css('position','absolute')
                    .html('*')
                    .click(function() {
                        alert('You Clicked');
                    })
            );

        }

        // repeat the generateSnow() function
        window.setTimeout(generateSnow, 1);     

    }

    // this function is to alter the top of each snow, using the handy .each() jQuery method
    function snowFalling(){

        // move the snow
        $('.snow').each(function(key, value){

            // check if the snow has reached the bottom of the screen
            if( parseInt($(this).css('top')) > windowHeight - 80 ) {

                // remove the snow from the HTML DOM structure
                $(this).remove();
            }       

            // set up a random speed
            var fallingSpeed = Math.floor(Math.random() * 5 + 1);

            // set up a random direction for the snow to move
            var movingDirection = Math.floor(Math.random()*2);

            // get the snow's current top
            var currentTop = parseInt($(this).css('top'));      

            // get the snow's current top
            var currentLeft = parseInt($(this).css('left'));                

            // set the snow's new top
            $(this).css('top', currentTop + fallingSpeed ); 

            // check if the snow should move to left or move to right
            if( movingDirection === 0){

                // set the snow move to right
                $(this).css('left', currentLeft + fallingSpeed );   

            }else {

                // set the snow move to left
                $(this).css('left', currentLeft + -(fallingSpeed) );                

            }                   

        }); 


        // repeat the rollIt() function for each 200 microseconds
        window.setTimeout(snowFalling, 200);            

    }        

    // call the function when the document is loaded completely
    generateSnow();   
    snowFalling();

});

任何建议都会很棒。

Answer 1

使用 css3 动画或 jquery 动画会有更好的解决方案，但以下更改使您的代码具有响应能力 demo

 $(document).ready(function(){    

        // get the height and width of the browser window
        var windowHeight = $(window).height();
        var windowWidth = $(window).width();

        // set the height and width of the #snowingScreen div equivalent to that of the window's
        $('#snowingScreen').css('height', windowHeight);
        $('#snowingScreen').css('width', windowWidth);  


        // this function is to generate snow randomly scattered around screen
        function generateSnow() {

            // generate snow using a for loop
            for(i=0; i<4; i++){

                // randomize the top position of the snow
                var snowTop = Math.floor(Math.random()* (windowHeight/2) );     

                // randomize the left position of the snow
                var snowLeft = Math.floor(Math.random()* (windowWidth - 10) );  

                // appending the snow to the #snowingScreen
                $('body').append(

                    // generate the div representing the snow and setting properties using various jQuery methods               
                    $('<div />')
                        .addClass('snow')
                        .css('top', snowTop)
                        .css('left', snowLeft)
                        .css('position','absolute')
                        .html('*')
                        .click(function() {
                            alert('You Clicked');
                        })
                );

            }

            // repeat the generateSnow() function

        }

        // this function is to alter the top of each snow, using the handy .each() jQuery method
        function snowFalling(){

            // move the snow
            $('.snow').each(function(key, value){

                // check if the snow has reached the bottom of the screen
                if( parseInt($(this).css('top')) > windowHeight - 80 ) {

                    // remove the snow from the HTML DOM structure
                    $(this).remove();
                }       

                // set up a random speed
                var fallingSpeed = Math.floor(Math.random() * 5 + 1);

                // set up a random direction for the snow to move
                var movingDirection = Math.floor(Math.random()*2);

                // get the snow's current top
                var currentTop = parseInt($(this).css('top'));      

                // get the snow's current top
                var currentLeft = parseInt($(this).css('left'));                

                // set the snow's new top
                $(this).css('top', currentTop + fallingSpeed ); 

                // check if the snow should move to left or move to right
                if( movingDirection === 0){

                    // set the snow move to right
                    $(this).css('left', currentLeft + fallingSpeed );   

                }else {

                    // set the snow move to left
                    $(this).css('left', currentLeft + -(fallingSpeed) );                

                }                   

            }); 


            // repeat the rollIt() function for each 200 microseconds



        }        

        // call the function when the document is loaded completely
        window.setInterval(snowFalling, 200); 
        window.setInterval(generateSnow, 200);
    });