如何用Div替换图像

Question

我有一个插件，在点击submit按钮后生成一个ajax加载图像。它是由wordpress短代码生成的，不能直接编辑，除非我进入插件文件并进行更改。但是，这需要我在每次插件更新时更改它，这是不理想的。

我希望用一些额外的代码覆盖图像。

基本上，我想替换它：

<img class="ajax-loader" src="/ajax-loader.gif">

使用更好看的css加载栏：

<div class="wrap go"><div class="loader bar"><div class="sfmgreen"></div><div class="dkblue"></div><div class="ltblue"></div><div class="aqua"></div></div> 

我是否可以使用任何代码来覆盖插件的图像并进行替换？

Answer 1

HTML中没有真正可用的功能可以自动覆盖页面中的元素。您只需要在DOM中找到并替换它。这意味着您必须知道何时出现，以便您可以使用某种触发器进行替换。

例如，如果在单击某个提交按钮后立即显示元素，则此功能将起作用。

document.querySelector('#some-submit-btn').addEventListener('click', function() {
  var loaders = document.querySelectorAll('.ajax-loader');
  for (var i = 0; i < loaders.length; i++) {
    var loader = loaders[i];
    var replacement = document.createElement('div');
    replacement.innerHTML = '<div class="wrap go"><div class="loader bar"><div class="sfmgreen"></div><div class="dkblue"></div><div class="ltblue"></div><div class="aqua"></div></div>';
    loader.parentElement.replaceChild(loader, replacement);
  }
});

...但是如果那些加载器映像直到某个时间以后，那么你可能需要用setTimeout之类的某种黑客来包装那些代码。

在任何一种情况下，如果您在更换之前看到旧物，可能会有闪光。要解决这个问题，可以用CSS隐藏它：

 .ajax-loader {
   display: none;
 }

总而言之，实际上只会采用黑客的方式进行替换;更新插件是最简洁的方法。也许您可以为项目贡献一些自定义加载器HTML代码（如果它是开源的），以避免在每次更新后更新插件。