JQuery comment exécuter après le chargement de la page

Question

J'ai ce morceau de code qui exécute une fonction pour transformer une image couleur avec la classe = "gris" en échelle de gris.

$(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(); 
} 

Cela fonctionne bien avec la fonction de clic, mais je veux que l'image de couleur pour devenir gris mis à l'échelle immédiatement à droite après la page est chargée, de sorte que la fonction doit fonctionner sans le clic. Comment faire ça?

Answer 1

Vous pouvez remplacer click avec each.

Answer 2

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

Answer 3

La fonction qui est passé à $ (document) .ready est appelé dès que le DOM est prêt

Answer 4

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

.attr() fait l'itération pour vous./acclamations

Answer 5

Si vous souhaitez affecter un rappel de clic et l'exécuter immédiatement, vous pouvez envoyer l'événement click à l'objet.

$ (sélecteur) .trigger ("onclick");