0

我正在为网站使用 jQuery 1.8.2 和 jQuery mobile 1.3.2。在一页上，我需要等待整个页面加载后才能应用一些 javascript。我成功地使用了pageinit这样的事件：

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

但这domready()比事件更接近事件window.load。因此，在jQuerymobile api之后，我想使用该pageload事件，如下所示：

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

但这根本不会触发。#filmes是我希望应用 js 代码的页面的 ID 。pageshow活动正常：

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

但是我仍然有一些javascript问题，在我看来是因为当js启动时页面还没有完成加载。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);

    });
});

这是所有这些的演示。向下滚动，然后点击顶部菜单上的“电影”链接。该页面的直接链接在这里。如果您打开控制台，您可以看到我用于测试这些事件的消息。我通常会在第一次加载时遇到这些错误，然后在刷新后有时看起来还可以。真的很随意。我猜这些操作需要相当多的 cpu 和浏览器工作。

因此，经过多次测试和研究，我想知道我是否在 jqm 或 javascript 操作上做错了，或者我只是在做一些太重的事情，浏览器无法呈现。

4

0 回答 0