Javascript 我如何知道图像何时加载并对其作出反应？

我正在做一个AJAX调用，当AJAX调用满足某些条件时，它将使用这个函数显示两个图像

我用一个函数创建元素，我要做的是在创建元素时添加一个类，比如“rightIn”和“leftIn”，它们是动画类。。问题是当类被添加并且图像从左/右进入时，图像可能还没有完全加载到图像元素的源中。。。。哪个会产生不良影响

那么基本上，我如何等待并检查图像何时加载，然后在类中添加右/左？我用

.complete

和load事件尝试了一些不同的方法，但没有达到我想要的目的

function optionTwo(versusOne, versusTwo, versusOneId, versusTwoId) {
    var newElement = createElement("div", {
        "id": "contentVersusWrapper",
        "class": ["contentVersusWrapper"]
    }, contentWrapper);
    var contentVersusWrapper = document.getElementById("contentVersusWrapper");
    var newElement = createElement("div", {
        "id": "contentVersusHelperOne",
        "class": ["contentVersusHelper", "leftIn"]
    }, contentVersusWrapper);
    var contentVersusHelperOne = document.getElementById("contentVersusHelperOne");

    var newDiv = createElement("img", {
        "id": "versusOne",
        "class": ["babeVersus"],
        "src": versusOne
    }, contentVersusHelperOne);
    var newDiv = createElement("input", {
        "id": "versusOneId",
        "class": ["versusOneId"],
        "type": "hidden",
        "name": "versus",
        "value": versusOneId
    }, contentVersusHelperOne);

    var newDiv = createElement("img", {
        "id": "versusIcon",
        "class": ["versusIcon", "scaleIn"],
        "src": "assets/img/versusIcon.png"
    }, contentVersusWrapper);

    var newElement = createElement("div", {
        "id": "contentVersusHelperTwo",
        "class": ["contentVersusHelper", "rightIn"]
    }, contentVersusWrapper);
    var contentVersusHelperTwo = document.getElementById("contentVersusHelperTwo");
    var newDiv = createElement("img", {
        "id": "versusTwo",
        "class": ["babeVersus"],
        "src": versusTwo
    }, contentVersusHelperTwo);
    var versusOne, versusTwo;

    var newDiv = createElement("input", {
        "id": "versusTwoId",
        "class": ["versusTwoId"],
        "type": "hidden",
        "name": "versus",
        "value": versusTwoId
    }, contentVersusHelperTwo);

    document.getElementById("versusOne").addEventListener('click', shuffleContent.bind(null, "versusOne"), false);
    document.getElementById("versusTwo").addEventListener('click', shuffleContent.bind(null, "versusTwo"), false);
}

---

只需将映像设置为具有“加载”事件回调函数：

var img=document.querySelector（“img”）；
img.addEventListener（“加载”，函数（）{
警报（“图像加载”）；
img.classList.add（“已加载”）；
});
.loaded{边框：4px实心红色；}
只需将映像设置为具有“加载”事件回调函数：


var img=document.querySelector（“img”）；
img.addEventListener（“加载”，函数（）{
警报（“图像加载”）；
img.classList.add（“已加载”）；
});
.loaded{边框：4px实心红色；}
一般来说，在
上放置
加载事件是一种很好的检查方法

然而，有一个陷阱。如果之前加载了图像，则不会触发
加载
事件

如果您创建了大量图像，并带有一些重复出现的URL，则可能会发生这种情况

但是，您可以通过检查图像的
宽度
或
高度
来检查这一点。未加载的图像的宽度和高度始终为0。如果不是零，它就被加载了

const img = document.createElement('img');
img.src = 'myurl.png';
img.addEventListener('load', () => console.log('loaded'));

这将确保捕获这两个方法，以确保它已加载

const img = document.createElement('img');
img.src = 'myurl.png';
img.addEventListener('load', () => console.log('loaded'));

假设您的
createElement
返回了一个
图像
元素（与
document.createElement（'img'）
中的内容相同），那么您的代码可能如下所示：

const img = document.createElement('img');
img.src = 'myimage.png';
img.addEventListener('load', onLoadFunc);

if (img.width) {
  onLoadFunc();
}

其中，
doSomething（）
是一个函数，它在加载图像时执行您需要它执行的任何操作。
通常，在
上放置
load
事件是一种很好的检查方法

但是，有一个问题。如果以前加载了图像，它将不会触发
加载事件
事件

如果您创建了大量图像，并带有一些重复出现的URL，则可能会发生这种情况

但是，您可以通过检查图像的
宽度
或
高度
来检查。未加载的图像的宽度和高度始终为0。如果不是零，则加载

const img = document.createElement('img');
img.src = 'myurl.png';
img.addEventListener('load', () => console.log('loaded'));

这将确保捕获这两个方法，以确保它已加载

const img = document.createElement('img');
img.src = 'myurl.png';
img.addEventListener('load', () => console.log('loaded'));

假设您的
createElement
返回了一个
图像
元素（与
document.createElement（'img'）
中的内容相同），那么您的代码可能如下所示：

const img = document.createElement('img');
img.src = 'myimage.png';
img.addEventListener('load', onLoadFunc);

if (img.width) {
  onLoadFunc();
}

其中，
doSomething（）
是一个函数，它在加载图像时执行任何您需要的操作。
使用jquery数据存储，您可以定义“已加载”状态


if（$（'#image'）.data（'loaded'））{
//加载，所以做的东西
}
使用jquery数据存储，您可以定义“已加载”状态


if（$（'#image'）.data（'loaded'））{
//加载，所以做的东西
}
我不使用jQery问题也没有用jQuery标记：）我不使用jQery问题也没有用jQuery标记：）但是图像将被加载多次，这是一个评级与系统的对比，因此可以反复加载相同的图像。。还有，我该如何实现这一目标javascript@Javaish事实上，这就是为什么我给了你额外的一点，因为我认为你在多次重新加载图像。这就是为什么您还应该使用text
img.width
。至于如何在您的特定JavaScript中实现它，我不能告诉您，因为我不知道您的
createElement
函数返回了什么。基本上，无论您在哪里指定
src
，都要设置事件侦听器并进行宽度检查，如果通过，则调用回调函数。
函数createElement（type，attributes，someElement）{var element=document.createElement（type）；for（var-key-in-attributes）{if（key==“class”）{var cls=attributes[key]；for（cls中的var c）element.classList.add（cls[c]）；}否则{element[key]=attributes[key]；}}someElement.appendChild（element）；}
基本上，这是我使用的create函数，但我不知道如何将它与我的函数一起使用，并在加载图像时将css动画中的左/右附加到它们的父元素：）我在我的答案中添加了一个更新，试图为您指出正确的方向。尝试一下，如果您仍然有问题，请发布一个新的问题但是图像将被多次加载，这是一个评级与系统的对比，因此相同的图像可以一次又一次地加载。还有，我该如何实现这一点呢javascript@Javaish事实上，这就是为什么我给了你额外的一点，因为我认为你在多次重新加载图像。这就是为什么你也应该发短信e> img.width
。至于如何在特定JavaScript中实现它，我无法告诉您，因为我不知道
createElement
函数返回的是什么。不过，基本上，无论您在哪里指定
src
，都要设置事件侦听器并进行宽度检查，如果通过，则调用回调。
function createElement（类型，属性，someElement）{var element=document.createElement（类型）；for（属性中的var键）{