javascript - 需要帮助选择 JS/jQuery 事件

Question

我有一个基于 jQuery 的小脚本，旨在对图像进行灰度化。

它有效，但我在选择触发它的事件时遇到了一个大问题。 我需要它在加载图像时自动触发一次。现在，这个:

imgObj.ready

在 IE 中完美运行，在 Firefox 中，每次刷新都是一场赌博，而在 Safari/Chrome/Opera 中则完全不行。

但是:

imgObj.click

在所有浏览器中都能很好地工作，但我需要它自动发生，而不需要点击。 (或者使用模拟点击，但我没能做到，有人知道怎么做吗？)

最后是这个:

imgObj.load

工作“太好了” - 它可以在所有浏览器中工作，但不断地一遍又一遍地重新执行该函数 - 我尝试将一个变量放入函数中以使其仅执行一次，但它不起作用，。 load 不断重新执行。

很抱歉这篇文章很长，非常感谢您的阅读 - 下面是完整的代码。

    var imgObj = $('#image'); 

        imgObj.click(function(){

            var imgObj = document.getElementById('image');

            if($.browser.msie){
                grayscaleImageIE(imgObj);
            } else {
                imgObj.src = grayscaleImage(imgObj);
            }           
        });

    function grayscaleImageIE(imgObj)
    {
        imgObj.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)';
    }

    function grayscaleImage(imgObj)
    {


        var canvas = document.createElement('canvas');
        var canvasContext = canvas.getContext('2d');

        var imgW = imgObj.width;
        var imgH = imgObj.height;
        canvas.width = imgW;
        canvas.height = imgH;

        canvasContext.drawImage(imgObj, 0, 0);
        var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);

        for(var y = 0; y < imgPixels.height; y++){
            for(var x = 0; x < imgPixels.width; x++){
                var i = (y * 4) * imgPixels.width + x * 4;
                var avg = (imgPixels.data[i] + imgPixels.data[i
+ 1] + imgPixels.data[i + 2]) / 3;
                imgPixels.data[i] = avg; 
                imgPixels.data[i + 1] = avg; 
                imgPixels.data[i + 2] = avg;
            }
        }

        canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
        return canvas.toDataURL();      
    }

Answer 1

这个怎么样？

imgObj.one('load',function(){

        var imgObj = document.getElementById('image');

        if($.browser.msie){
            grayscaleImageIE(imgObj);
        } else {
            imgObj.src = grayscaleImage(imgObj);
        }           
    });