等待图像加载Javascript

我正在进行Ajax调用,它会返回一些信息,包括图像路径.我在HTML中准备了所有这些信息,这些信息将显示为一种弹出窗口.我只是将popup div的可见性从隐藏切换为可见.

要设置弹出窗口div的位置,我必须根据图像的高度进行计算.因此,在设置位置和将可见性切换为可见之前,我必须等待图像加载以了解其尺寸.

我尝试了递归,setTimeout,完成img属性的技巧,而循环...没有成功.

那么,我该怎么做呢.也许我应该在Ajax调用中返回维度.

1> Josh Stodola..：

---

var img = new Image();
img.onload = function() { alert("Height: " + this.height); }
img.src = "http://path/to/image.jpg";

请注意,按上述顺序执行此操作非常重要:首先附加处理程序,然后设置src.如果你反过来这样做,并且图像在缓存中,你可能会错过这个事件.JavaScript在浏览器中的单个线程上运行(除非您使用的是Web工作者),但浏览器不是单线程的.浏览器看到src,识别资源是否可用,加载它,触发事件,查看元素是否有任何需要排队等待回调的处理程序,看不到任何处理程序,并完成事件是完全有效的.处理,所有src行和连接处理程序的行之间.(如果它们被注册,它们之间不会发生回调,它们会在队列中等待,但如果没有,则不需要等待事件.)

---

@Marco或者在XHR上设置`cache:false` :)虽然我认为它不相关,因为AJAX调用返回的是图像的URL,而不是图像本身.但是,我想他仍然可以使用随机查询字符串值来确保不会发生用户代理缓存.

2> Sagi..：

---

如果使用jQuery,则可以使用其load事件.

看看这个例子:

$('img.userIcon').load(function(){
    if($(this).height() > 100) {
        $(this).addClass('bigImg');
    }
});

---

除非请求jquery,否则请不要使用jquery

---

-1:在问题中没有提到jQuery,所以像这样的答案可能会让人很困惑.

---

当与图像一起使用时,请注意以下有关加载方法的注意事项(摘自http://api.jquery.com/load-event/):>它不能一致地工作,也不能可靠地跨浏览器>它没有如果图像src设置为与之前相同的src,则在WebKit中正确触发>它没有正确地冒泡DOM树>可以停止为已经存在于浏览器缓存中的图像触发