Помощь, необходимая для выбора события 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); 
     }   
    }); 

Answer 2

Вы пробовали

$(document).ready(function(){ 

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