完整图像加载后javascript执行功能

Question

我有以下一行javascritp $("#hero_image img").attr('src', src);来改变图像.然后,以下行根据我调用的图像新宽度执行任何操作$("#hero_image img").width();.

但是,如何在获得宽度之前确保此图像已完全加载,否则我将以旧宽度返回？设置超时不够可靠.

Answer 1

您可以获取.load()事件处理程序中的宽度,该处理程序在完全加载后触发,如下所示:

$("#hero_image img").load(function() {
  alert($(this).width());
}).attr('src', src);

如果你这样做,并重新使用的图像,无论是绑定的.load()处理程序一次,你需要不同的行为,每一次使用.one(),因此不会继续增加的onload事件处理程序:

$("#hero_image img").one('load', function() {
  alert($(this).width());
}).attr('src', src);