Простая функция JavaScript

Question

Я использую [jQuery плагин] [1], чтобы создать размытое изображение со следующим кодом:

$(document).ready(function(){

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

});

Как я могу переписать это так, чтобы вместо создания изображения я мог просто назначить его ?

UPDATE:

Новый код все еще не работает:

<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

Функция img.onload получает удар?Если код даже не входит в функцию, это может быть связано с тем, что вы создаете экземпляр кода .onload в функции jQuery .ready(), которая ожидает загрузки страницы для выполнения кода (см. Документацию ready() )К моменту создания экземпляра функции изображение уже загружено, поэтому событие никогда не сработает.

Answer 2

Изменение

img = new Image();

до

img = $(".blurthisimage");

UPDATE Попробуйте проверить, загружено ли изображение с этим

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

если вы хотите, чтобы эта работа выполнялась на нескольких изображениях, используйте следующее:

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

Если это не сработает, добавьте оповещение внутрь вашей функции onload, чтобы увидеть, срабатывает ли она