Меняю кнопками src в iframe и хочу сделать для него preloader. Но он пропадает не дожидаясь загрузки страницы(отслеживаю через DevTools браузера). Помогите пожалуйста.
// Сбрасывает iframe и подставляет новую ссылку из input=radio в него
$('input[name="input_radio"]').click(function() {
$("iframe#main_iframe").removeAttr('onload');
$("iframe#main_iframe").attr('src', '');
$('iframe#main_iframe').css('display', 'none');
$(".preloader").css('display', 'block');
setTimeout(function() {
let ifsrc = $('input[name="input_radio"]:checked').val()
theme = `${ifsrc}`;
$('iframe#main_iframe').attr('src', theme);
}, 500);
});
// Сбрасывает iframe и подставляет новую ссылку из input=radio в него
// Действия после загрузки iframe
document.getElementById('main_iframe').onload = function() {
$(".preloader").css('display', 'none');
$('iframe#main_iframe').css('display', 'block');
}
// Действия после загрузки iframe
.preloader {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="input_radio" value="" id="id1">
<label for="id1">Пустой</label>
<input type="radio" name="input_radio" value="https://488542.annacdn.cc/hxhCnBZvbnnS/tv-series/10579" id="id2">
<label for="id2">Долго загружающаяся страница</label>
<input type="radio" name="input_radio" value="https://videocdn.tv/" id="id3">
<label for="id3">Сайт с фильмами(не реклама)</label>
<iframe src="" id="main_iframe"></iframe>
<div class="preloader" id="preloader">
<p>Load...</p>
</div>