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

});

如何重写这一点，而不是创建图像，我可以将其分配给＆lt; img class =“blurthisimage”＆gt;？

更新：

新代码仍无效：

<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 = 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功能中添加提醒以查看它是否会触发

Answer 2

img.onload功能是否被击中？如果代码甚至没有进入函数，那么可能是因为你在jQuery的.onload函数中实例化了.ready()代码，该函数等待加载页面以运行代码（参见ready() documentation ）。当函数被实例化时，图像已经被加载，因此事件永远不会被激活。

简单的JavaScript功能

2 个答案: