Simple JavaScript function to blur an image

Question

I'm using a [jQuery plugin][1] to create a blur an image with the following code:

$(document).ready(function(){
    
var img = new Image();
img.onload = function() {
    Pixastic.process(img, "blurfast", {amount:1});
}
document.body.appendChild(img);
img.src = "image.jpg";

});

How can I rewrite this so than rather than creating the image I can just assign it to < img class="blurthisimage" >?

UPDATE:

New code still not working:

<img src="image.jpg" class="blurthisimage" />

<script type="text/javascript">
$(document).ready(function(){
var img = $(".blurthisimage");
img.onload = function() {
    Pixastic.process(img, "blurfast", {amount:1});
}
});
</script>

Answer 1

Change

img = new Image();

to

img = $(".blurthisimage");

UPDATE Try checking to see if the image is loaded with this

if (img[0].complete == true) {
    Pixastic.process(img[0], "blurfast", {amount:1});
}
else {
    img.load(function () {
        Pixastic.process(img[0], "blurfast", {amount:1});
    });
}

if you wanted to have this work on multiple images use the following:

img.each(function(index, element)
{
    if (img[index].complete == true) {
        Pixastic.process(img[index], "blurfast", {amount:1});
    }
    else {
        img.load(function () {
            Pixastic.process(img[index], "blurfast", {amount:1});
        });
    }
});

If that doesn't work add an alert to inside your onload function to see if it even fires

Answer 2

Is the img.onload function getting hit? If the code is not even getting into the function it might be because you instantiate the .onload code in jQuery's .ready() function which waits until the page is loaded to run the code (see the ready() documentation) . By the time the function gets instantiated the image has already been loaded so that event will never fire.