Jquery：如何在 attr 后执行回调？

Question

我希望先更改图片的src，然后再完成其他操作。就像这样-

$('#bgImage').attr('src','images/'+bgImage, function() {
    alert('inside');
});

我该怎么做呢？

- Avisek Chakraborty

---

你想在回调函数中实现这个功能的特殊原因是什么，而不使用建议的解决方案吗？ - Favio

对于大图片，我想先加载它。 - Avisek Chakraborty

Answer 1

也许是另一行代码？

$('#bgImage').attr('src','images/'+bgImage),
$('#searchPin').css("top",y+"px");
$('#searchPin').css("left",x+"px");

如果你想等待图片加载完成，那么你可能需要使用事件load：

$('#bgImage').load(function() {
    $('#searchPin').css("top",y+"px");
    $('#searchPin').css("left",x+"px");
}).attr('src','images/'+bgImage);

请注意，在使用attr更改src属性之前创建了load(...)事件处理程序——以防图像已被缓存。

如果您需要多次执行此操作，您可能还需要了解一下unbind方法。

- Richard JP Le Guen

---

我认为在更改源路径之前，您应该先绑定载入项，以防目标已被缓存。 - Matt

最好在更改“src”属性之前将处理程序绑定到“load”事件。这是因为如果图像已缓存，则会在附加处理程序之前加载它，并且不会被调用。您还应该将两个对同一元素的调用链接起来，或者更好的是，由于两者都是使用对象参数的“css”方法，因此可以使用接受多个选项以更改“.css（{top:y+'px'，left:x+'px'}）”。 - Gabriele Petrioli

@Matt - 这是一个好观点。我会相应地更改答案。 - Richard JP Le Guen

@Gaby aka G. Petrioli - 我同意，但我会保留.css(...)，因为这不是特别要求的内容。 - Richard JP Le Guen

Answer 2

当您更改图像源时，它将被加载，并在完成后触发onload事件。因此：

$('#bgImage').attr('src','images/'+bgImage).load(function() {
    $('#searchPin').css("top",y+"px");
    $('#searchPin').css("left",x+"px");
});

- Jacob Mattison

---

最好在更改src属性之前将处理程序绑定到load事件。这是因为如果图像已缓存，则会在附加处理程序之前加载它，并且不会被调用。您还应该将两个对同一元素的调用链接起来，或者更好的是，由于两者都是对css方法的使用，请使用接受多个选项的对象参数来更改.css({top:y+'px', left:x+'px'})。 - Gabriele Petrioli

对我来说非常有效 :)非常感谢。 - Abhijeet Ashok Muneshwar

Answer 3

.attr 立即执行。很可能你实际需要的是等待图像加载完成后再执行某些操作。

var $img = $("#bgImage");    
$img.load(function(){
    // image is done loading, do something
    alert("worky (not cached)")
});
$img.attr('src','images/' + bgImage);

- Kevin B

---

@Matt 我不确定；缓存检查的代码最初并不是我写的，而是来自这个论坛帖子：https://forum.jquery.com/topic/wait-until-all-images-are-loaded - Kevin B

@Matt 嗯...实际上它不是来自那里。那我就不知道了。 - Kevin B

我有一种感觉，它最初来自于XMLHTTPRequest.readyState和<img />的complete之间的某些混淆... 我敢打赌它是不存在的。 - Matt

非常有趣。我这里没有IE9，但我相信你的话 :P - Matt