我会尝试这样的事情
var imageChanger = function (elt, url) {
fetch(url).then(function (data) {
elt.src = data.image;
};
}
document.getElementsByTagName('img').addEventListener('mouseover', function (event) {
imageChanger(event.currentTarget, url);
});
这样做因为你有一个异步的过程中,你可能有mouseleave事件会的获取分辨率前触发。这将使您的图像不会回到以前的图像。
我会建议增加一些对你的代码,以防止这一点。
你可以尝试:
var imageChanger = function (elt, url) {
elt.dataset.original = elt.src;
elt.dataset.changed = true;
if (elt.dataset.secondary) {
elt.src = elt.dataset.secondary;
} else {
fetch(url).then(function (data) {
if (elt.dataset.changed) elt.src = data.image;
elt.dataset.secondary = data.image;
}
}
}
var imageRestore = function (elt) {
elt.src = elt.dataset.original;
elt.dataset.changed = false;
}
document.getElementsByTagName('img').addEventListener('mouseleave', function (event) {
imageRestore (event.currentTarget);
});
document.getElementsByTagName('img').addEventListener('mouseover', function (event) {
imageChanger(event.currentTarget, url);
});