等待图像加载在Javascript中
我正在做一个Ajax调用，它返回一些信息，包括图像path。 我准备了所有这些信息在我的HTML将被显示为一种popup。 我只是通过popupdiv从隐藏可见切换的可见性。
要设置我的popupdiv的位置，我必须计算取决于图像的高度。 因此，在设置位置并将可见性切换为可见之前，我必须等待图像加载以了解其尺寸。
我尝试了recursion技巧，setTimeout，完成img属性，while循环…没有成功。
那么，我该怎么做呢。 也许我应该在我的Ajax调用中返回维度。
var img = new Image(); img.onload = function() { alert("Height: " + this.height); } img.src = "http://path/to/image.jpg";
请注意，按照上面的顺序执行它很重要： 首先附加处理程序， 然后设置src 。 如果以相反的方式进行操作，并且映像处于caching中，则可能会错过该事件。 JavaScript是在浏览器中的一个线程上运行的（除非你使用networking工作者），但是浏览器不是单线程的。 浏览器查看src ，识别资源是否可用，加载它，触发事件，查看元素是否有任何需要排队等待callback的处理程序，看不到任何处理程序以及完成事件处理，全部在src行和附加处理程序的行之间。 （如果他们是注册的，线路之间不会发生callback，他们会在队列中等待，但是如果没有的话，则不需要等待。
如果你使用jQuery，你可以使用它的加载事件。
看看这个例子：
$('img.userIcon').load(function(){ if($(this).height() > 100) { $(this).addClass('bigImg'); } });
我在我的页面上加载了一个缓慢的validation码（1st_image）图像，我只想在加载validation码图像（1st_image）后显示另一个图像（2nd_image）。 所以我不得不等待validation码（1st_image）图像先加载。
这里是解决scheme，完美地等待图像先加载，然后加载另一个图像：（不要忘记显示一个“请稍候！”图像，而他们正在等待其他图像加载）
<script> function checkImageLoad() { if (document.getElementById("1st_image").complete == true){console.log("1st_image Loaded!");} document.getElementById("2nd_image").src = "http://domain.com/2nd_image.png"; } </script> <body onload="checkImageLoad();"> <img id="1st_image" src="http://domain.com/1st_image.png"> <img id="2nd_image" src="http://domain.com/loading_please_wait.gif">
无论上网速度是慢还是快，浏览器都会等待整个页面加载所有的图像（即使它们是外部链接的），然后执行该function，所以第二个图像只有在第一个图像加载好后才显示。
高级注意：您可以使用图像的“src”中的网页URL先载入网页，然后显示图像。 目的是从可能影响显示的第二个图像的外部网页加载cookie（如captcha）
