javascript - jQuery モバイルのページロードと画像処理

Question

サイトに jQuery 1.8.2 と jQuery mobile 1.3.2 を使用しています。あるページでは、JavaScript を適用するためにページ全体が読み込まれるのを待つ必要があります。私は次のpageinitようにイベントをうまく使用しています：

$(document).on('pageinit', '#filmes' ,function(){
    console.log('pageinit filmes');     
});

しかし、これdomready()はwindow.load. したがって、jQuerymobile apipageloadに従って、次のようにイベントを使用したいと思います。

$(document).on('pageload', '#filmes', function(){  
    console.log('pageload filmes');
});

しかし、これはまったくトリガーしません。#filmesは、js コードを適用するページの ID です。pageshowイベントは正常に動作します:

$(document).on('pageshow', '#filmes', function(){
    console.log('pageshow filmes');
});

しかし、私の意見では、js が開始されたときにページの読み込みが完了していないため、まだ JavaScript の問題がいくつかあります。JavaScript 操作は少し重いです。ページ上の各画像のキャンバスを作成しています。画像を複製し、乗算操作を適用します。

コードは次のとおりです ( Alberto Gasparin の記事に基づく):

$(document).on('pageshow', '#filmes', function(){
    console.log('pageshow filmes');

    //multiply effect
    var els = document.getElementsByClassName("multiply");
    Array.prototype.forEach.call(els, function(el) {

        console.log(el); //test

        canvas = document.createElement('canvas');
        canvas.width = el.width*2;
        canvas.height = el.height*2;
        el.parentNode.insertBefore(canvas, el);

        ctx = canvas.getContext('2d');
        ctx.drawImage(el, 0, 0);
        imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        pix = imgData.data;

        multiplyColor = [255, 0, 0];
        function multiply(topValue, bottomValue){
            return topValue * bottomValue / 255;
        }

        for (var i = 0, n = pix.length; i < n; i += 4) {
            pix[i  ] = multiply(multiplyColor[0], pix[i  ]); // red
            pix[i+1] = multiply(multiplyColor[1], pix[i+1]); // green
            pix[i+2] = multiply(multiplyColor[2], pix[i+2]); // blue
            // pix[i+3] is alpha channel (ignored)
        }
        ctx.putImageData(imgData, 0, 0);

    });
});

これがすべてのデモです。下にスクロールして、トップ メニューの [Filmes] リンクをクリックします。ページへの直リンクはこちらです。コンソールを開くと、これらのイベントのテストに使用しているメッセージが表示されます。私は通常、最初の読み込みでこれらのバグを取得し、更新後に問題がないように見えることがあります。本当にランダムです。これらの操作にはかなりのCPUとブラウザの作業が必要だと思います。

したがって、多くのテストと調査の結果、jqm または JavaScript 操作で何か間違っているのか、それともブラウザーがレンダリングするには重すぎることをしているだけなのかを知りたいと思います。