如何用Div替换图像

Question

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

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

基本上，我想替换此：

<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代码（如果它是开源的），以避免在每次更新后更新插件。