Как заменить изображение на Div

Question

У меня есть плагин, который создает изображение загрузки ajax, после нажатия кнопки submit. Он генерируется shortcode 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; 
} 

В общем, есть на самом деле только собирается быть Hacky способов сделать замену; обновление плагина является самым чистым способом. Возможно, вы можете внести в проект какой-то пользовательский код HTML-кода загрузчика (если это открытый исходный код), чтобы не обновлять плагин после каждого обновления.