正在等待在JavaScript中加载图像

我正在进行一个Ajax调用，它会返回一些信息，包括图像路径

我准备所有这些信息在我的HTML，这将显示为一种弹出窗口。我只是将by popup div的可见性从hidden切换到visible

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

我尝试了递归、setTimeout、完整img属性的技巧，而循环。。。没有成功

---

那么，我该怎么做呢？也许我应该在Ajax调用中返回维度。

如果使用jQuery，可以使用它的事件

请看下面的示例：

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

请注意，按照上面的顺序进行操作非常重要：首先附加处理程序，然后设置

src

。如果以另一种方式执行，并且图像处于缓存中，则可能会错过该事件。JavaScript在浏览器中的单个线程上运行（除非您使用的是web workers），但浏览器不是单线程的。浏览器完全可以看到

src

，识别资源是否可用，加载它，触发事件，查看元素是否有任何需要排队等待回调的处理程序，看不到任何处理程序，并完成事件处理，所有这些都在

src

行和附加处理程序的行之间。（如果注册了，回调不会发生在两行之间，它们会在队列中等待，但如果没有回调，则事件不需要等待。）

我的页面上加载了一个缓慢的验证码（第一个图像）图像，我希望仅在加载验证码图像（第一个图像）后才显示另一个图像（第二个图像）。因此，我必须等待验证码（第一张图片）图像首先加载

下面是一个非常好的解决方案，先等待加载一个图像，然后再加载另一个图像（在他们等待加载其他图像时，不要忘记显示“请等待！”图像）：

函数checkImageLoad（）{
if（document.getElementById（“第一张图片”）.complete==true）{
console.log（“加载了第一张图片！”）；
}
document.getElementById（“第二张图片”）.src=”http://example.org/2nd_image.png";
}

Internet速度慢或快，浏览器将等待整个页面加载所有图像（即使它们是外部链接的），然后执行该功能，因此只有在第一个图像加载良好后，才会显示第二个图像

---

高级注意：您可以使用图像“src”中的网页URL首先加载网页，然后显示图像。其目的是从外部网页加载cookie，这可能会影响显示的第二个图像（如CAPTCHA）

只需将图像加载到一个带有承诺的函数中，然后使用wait调用它即可

async drawImg(ctx, image){

    return new Promise(resolve => {

          image.onload = function () {
                ctx.drawImage(image, 10, 10, 200, 180);
                resolve('resolved');
             }

    });

  }

它应该可以正常工作

虽然已经过时，但确实显示了基本的回调方法。现在，您可能希望保证图像加载以避免回调地狱

是一个很好的提示图像加载处理程序，但缺少一些关键点，如图所示

这里是另一个关于

图像
的更一般的说明。在
onerror
处理程序中拒绝，并将实际图像对象传递到解析器中，对于使函数的可重用性降至最低非常重要

改进可能包括附加参数（例如，
交叉原点
）。
settings
对象或提供
Image
作为参数是泛化函数的另一种方法（setting
src
触发请求，因此在添加处理程序后应该放在最后）


const loadImage=src=>
新承诺（（解决、拒绝）=>{
const img=新图像（）；
img.onload=（）=>resolve（img）；
img.onerror=拒绝；
img.src=src；
})  
;
加载图像（“http://placekitten.com/90/100）然后（图像=>
console.log（图像，`\n加载？${image.complete}`）
);窗口加载事件如何

window.addEventListener('load', (event) => {
  //do stuff with images
});

或


在运行布局脚本之前，我需要浏览器来计算图像的大小，这对我来说很有用。
为什么它不能与
图像一起工作。完成
属性？-1：问题中没有提到jQuery，因此，这样的答案可能会让人非常困惑。除非请求使用jquery，否则请不要使用jquery。在使用图像时，请注意加载方法的以下注意事项（取自）：>它在跨浏览器中无法稳定工作>如果图像src设置为与以前相同的src，则在WebKit中无法正确启动>它无法正确冒泡DOM树>对于已经存在于浏览器缓存中的图像，可以停止启动！顺便说一句：我对AJAX主题一无所知，但为了防止使用AJAX获得的图像以与直接写入HTML代码的图像相同的方式进行缓存，您最终可以添加此选项以避免浏览器的图像缓存（显然只有在需要时才添加）：img.src=“Date（）.getTime（））；@Marco或在XHR:）上设置
cache:false
），尽管我认为这与此无关，因为AJAX调用返回的是图像的URL，而不是图像本身。但是，是的，我想他仍然可以使用随机查询字符串值来确保不发生用户代理缓存。您是否也可以添加事件侦听器，或者正在替换
onload
方法？@IQAndreas:您可以使用
img.addEventListener（“加载”，…）
，是的。（或者
img.attachEvent（“加载”，…）
在旧IE上）。如果我更改第二行和第三行的顺序有关系吗？这里的
async
关键字是不必要的——返回承诺就足够调用方
等待它了。使用
拒绝（）
提示OneError处理程序也是一个好主意，这样调用方可以在
async drawImg(ctx, image){

    return new Promise(resolve => {

          image.onload = function () {
                ctx.drawImage(image, 10, 10, 200, 180);
                resolve('resolved');
             }

    });

  }

window.addEventListener('load', (event) => {
  //do stuff with images
});

window.onload = (event) => {
  //do stuff with images
};