Question

我正在进行AJAX调用，当AJAX调用符合某些条件时，它会使用此函数，它应该显示两个图像。

我用一个函数创建元素，我所做的是在创建元素等时添加一个类＆＃34; rightIn＆＃34;和＆＃34; leftIn＆＃34;这是动画类..问题是当添加类并且图像从左/右进入时，图像可能还没有完全加载到图像元素的源中......这会产生不良影响？

所以我基本上可以等待并检查图像何时加载，然后在类中添加右/左？我用.complete和加载事件尝试了一些不同的东西，但dident很可能到达我想要的地方。

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事件。

如果您使用一些重复的网址创建大量图片，就会发生这种情况。

您可以通过查看图片的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()是一个函数，可以在加载图像时执行您需要执行的操作。

Answer 2

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

var img = document.querySelector("img");

img.addEventListener("load", function(){
  alert("image loaded");
  img.classList.add("loaded");
});

.loaded { border:4px solid red; }

<img src="https://www.nasa.gov/sites/default/files/files/hubble_share.jpg">

Answer 3

使用jquery数据存储，您可以定义“已加载”状态。

if ($('#image').data('loaded')) {
    // loaded, so do stuff
}

<img id="image" onload="$(this).data('loaded', 'loaded');" src="" />

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

3 个答案: