JQuery как работать после загрузки страницы

Question

У меня есть этот кусок кода, который выполняет функцию преобразования цветного изображения с серией «серый» в серый.

$(document).ready(function(){ 
    $('.gray').click(function(){ 
    this.src = grayscale(this.src); 
    }); 
}); 

function grayscale(img){   
var canvas = document.createElement('canvas'); 
var ctx = canvas.getContext('2d'); 

var imgObj = new Image(); 
imgObj.src = img; 

canvas.width = imgObj.width; 
canvas.height = imgObj.height; 

ctx.drawImage(imgObj, 0, 0); 

var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height); 

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; 
     } 
} 

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

Это хорошо работает с функцией мыши, но я хочу, чтобы цвет изображение, чтобы стать серым масштабируются сразу сразу после загрузки страницы, поэтому функция должна работать без мыши. Как это сделать?

Answer 1

Вы можете заменить click с each.

Answer 2

$(function() { 
    $('.gray').attr('src', grayscale($('.gray').attr('src'))); 
}); 

Answer 3

Функция, которая передается в $ (документ) .ready называется как только DOM готов

Answer 4

$(function() { 
    $('.gray').attr('src', function() { return grayscale(this.src); }); 
}); 

.attr() делает итерации для вас./cheers

Answer 5

Если вы хотите назначить обратный вызов и запустить его сразу, вы можете отправить событие клика на объект.

$ (selector) .trigger ("onclick");