如何用 Div 替换图像答案

【问题标题】：How to replace an Image with a Div如何用 Div 替换图像
【发布时间】：2016-11-29 11:42:46
【问题描述】：

我有一个插件，可以在单击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>

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

【问题讨论】：

标签： javascript html wordpress image replace

【解决方案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);
  }
});

...但是如果这些加载器图像直到某个时间稍后才出现，您可能需要使用某种 hack 来包装该代码，例如 setTimeout。

在任何一种情况下，当您在替换出现之前看到旧东西时，可能会出现闪光。要解决这个问题，也许可以用 CSS 隐藏它：

 .ajax-loader {
   display: none;
 }

总而言之，实际上只有一些老生常谈的方法来进行替换；更新插件是解决这个问题的最干净的方法。也许您可以为项目贡献一些自定义加载器 HTML 代码（如果它是开源的），以避免每次更新后都必须更新插件。

【讨论】：

谢谢！我会看看插件，看看我能做什么。