1

主にキャンバスを使用する Web サイトを構築していますが、関連する唯一のキャンバスは水平に描かれた線だけで、線の長さは約 13000px です。

ユーザーがウィンドウをスクロールすると、m キャンバス パスに沿って水平方向にスクロールし ます。

Firefox (バージョン 6.0.2) でドキュメントがスクロールできないことに気付きました。私のコンソールでは、(NS_ERROR_OUT_OF_MEMORY) の行に沿って何かを受け取ります。

これをグーグルで調べた後、メモリリークの可能性があることがわかりましたか? これはどのように機能するのですか? コードの書き方が原因ですか? または、これはブラウザ/ハードウェアの問題ですか?

ウィンドウのサイズ変更などで機能を再初期化していますが、これが影響を与える可能性があるかどうかに興味がありますか?

// Initate the plugin

$(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
        $(this).trigger('resizeEnd');
    }, 500);
});

$(window).bind('resizeEnd', function() {
    $("#path").scrollPath({drawPath: true, wrapAround: false});
});

$("#path").scrollPath({drawPath: true, wrapAround: false}); 

        $(document).ready(init);

            $('.wrapper').css({'top' : '0px','left' : '0px'});
            $('.wrapper > div').css({'height' : + $(window).height() +'px'});

        function init() {


        // Set window height and width variables 
            var windowheight = $(window).height(); 
            var windowwidth = $(window).width(); 

            // Check monitor size and workot if incentives needs extra space etc 
            var bff = 4020 + (1993 - windowwidth);

            // Move divs into position 
            $('.culture').css('top', + - windowheight + 'px');
            $('.careerpath').css('top', + - windowheight + 'px');
            $('.training').css('top', + - windowheight + 'px');
            $('.apply').css('top' , + - windowheight + 'px');



            /* ========== DRAWING THE PATH AND INITIATING THE PLUGIN ============= */

            $.fn.scrollPath("getPath")
                // Move to 'start' element
                .moveTo(0, 0, {name: "div"})
                .lineTo(2400, 0, {name: "div1"})    

                .lineTo((bff-550), 0, {name: "div2"})

                .lineTo(bff, 0, {name: "div3"})

                .lineTo(bff, -windowheight, {name: "div4"}) 

                .lineTo((bff + 1993), -windowheight, {name: "div5"})

                .lineTo((bff + 1993 + 1837), -windowheight, {name: "div6"}) 

                .lineTo((bff + ((1993 + 1837 + 1795) - 325)), -windowheight, {name: "div7"})    

            // We're done with the path, let's initate the plugin on our wrapper element
            // Window resize function
            $(window).resize(function() {
                if(this.resizeTO) clearTimeout(this.resizeTO);
                this.resizeTO = setTimeout(function() {
                    $(this).trigger('resizeEnd');
                }, 500);
            });

            $(window).bind('resizeEnd', function() {
                $("#path").scrollPath({drawPath: true, wrapAround: false});
            });

            $("#path").scrollPath({drawPath: true, wrapAround: false});

        }
4

2 に答える 2

1

わかりました、あなたが使用したプラグインをグーグルで検索したので、何が起こっているのかわかりました.

http://joelb.me/scrollpath/

「線」は実際には形状であり、そのscrollPathための素晴らしい大きなキャンバスを生成しています。問題は中身scrollPathです。あまりにも多くのキャンバス インスタンスを作成するか、何かをリークします。

バグをもう少し詳しく追跡/文書化し、作成者に報告する必要があります。

単一の DOM 要素からパスを作成するという提案は、単一の直線を意味していないことがわかったので無効です。あなたのターゲットが正確に何であるかはわかりませんが、 impress.jsでそれを達成できるかもしれません

于 2013-02-20T09:32:53.737 に答える
0

あなたはそれを間違っています。このアプローチは、痛みにつながるだけです。

リークがあるとは思いません。単にプログラムのメモリを大量に消費しています。また、メモリ以外にも、これには大きなパフォーマンスの問題があります。2D キャンバスは、フィルレート (描画されるピクセル数) の影響を大きく受けます。これだけ多くのピクセルを描画すると、高速なコンピューターでも非常に遅くなります。

したがって、巨大なキャンバスを作成してから、その上でウィンドウ/ビューポートをスクロールしないでください。代わりに、大きなものの可視部分のみをレンダリングする小さなキャンバスを作成します。

于 2013-02-19T20:03:01.213 に答える