javascript - 我如何知道图像何时加载并对其使用react？

Question

我正在执行一个 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);
}

Answer 1

一般来说，输入 load <img> 上的事件是一个很好的检查方法。

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

但是，有一个问题。如果图像之前已加载，则不会触发 load事件。

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

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

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

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

这将确保您捕获这两种方法以确保其已加载。

假设您的 createElement返回 Image元素(与 document.createElement('img') 产生的内容相同，那么您的代码可能如下所示:

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

if(newDiv.width) {
    doSomething();
}

哪里doSomething()是一个函数，可以在加载图像时执行您需要执行的任何操作。