1

[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";

});

画像を作成するのではなく、 < img class="blurthisimage" > に割り当てることができるようにするには、どうすればこれを書き直すことができますか?

アップデート：

新しいコードはまだ機能していません:

<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>
4

2 に答える 2

1

関数はimg.onloadヒットしていますか？コードが関数に入っていない場合は、ページがロードされてコードが実行されるまで待機する.onloadjQuery の関数でコードをインスタンス化している可能性があります (ドキュメントを参照)。関数がインスタンス化されるまでに、画像はすでに読み込まれているため、イベントは発生しません。.ready()ready()

于 2011-10-11T01:30:34.850 に答える
1

変化する

img = new Image();

に

img = $(".blurthisimage");

更新 これで画像がロードされているかどうかを確認してください

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それが起動するかどうかを確認します

于 2011-10-11T01:16:28.327 に答える