Question

我有一个功能

function preloadImage() {
varLink=".... link to my picture..."
$("#picture").attr("src", varLink).one("load", function() {
 // This is called after the image is loaded
 }}

现在我在jquery脚本中多次调用此函数。但我需要它在加载图像后调用不同的函数。有没有更优雅的方法来做到这一点，而不是发送参数像：

function preloadImage（action）

并在执行函数后生成几个if if语句来替换：//在我的代码中加载图像后调用它？

所以我基本上需要在加载图像（回调）之后做几件事，所以我必须用几个不同的参数调用这个函数，还是有其他方法？

谢谢

杰里

Answer 1

您可以传递函数本身，例如：

function preloadImage(callback) {
  varLink=".... link to my picture..."
  $("#picture").one("load", callback).attr("src", varLink);
}

然后你可以调用它来传递函数，例如

function doSomething() {
  alert("I'm loaded!, my src is: " + this.src);
}
preloadImage(doSomething);

您可能也希望传递图像链接，我不清楚您的示例，但似乎您可能希望，这是一个例子，使用匿名函数：

//define it
function preloadImage(imageUrl, callback) {
  $("#picture").one("load", callback).attr("src", imageUrl);
}

//example call
preloadImage('myImage.jpg', function () { 
  alert("I'm loaded!, my src is: " + this.src);
});

要记住的最后一件事是，您应该在设置load之前绑定src事件处理程序，以确保它在所有情况下都会触发（来自缓存例如），就像我上面一样。

编辑，添加评论版本：

function preloadImage(callback) { varLink=".... link to my picture..." $("#picture").one("load", function() { callback.apply(this, arguments); $('#ajax-loader').hide(); }).attr("src", varLink); }

还有一个替代方案，保持简单并分别绑定“每次”功能，如下所示：

//this handler happens on all future loads $("#picture").load(function() { $('#ajax-loader').hide(); }); //this handler runs just once for this load function preloadImage(callback) { varLink=".... link to my picture..." $("#picture").one("load", callback).attr("src", varLink); }

如何制作负载响应有几个条件？

1 个答案: