Tenho na minha página o seguinte script do google:
<body>
<!-- Google Tag Manager -->
<noscript>
<iframe src="//www.googletagmanager.com/ns.html?id=GTM-abcdef"
height="0" width="0" style="display:none;visibility:hidden">
</iframe>
</noscript>
<script>
(function(w,d,s,l,i){
w[l]=w[l]||[];
w[l].push({
'gtm.start': new Date().getTime(),
event:'gtm.js'
});
var f=d.getElementsByTagName(s)[0];
var j=d.createElement(s);
var dl=l!='dataLayer'?'&l='+l:'';
j.async=true;
j.src='//www.googletagmanager.com/gtm.js?id='+i+dl;
f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-abcdef');
</script>
...
Que, ao renderizar a página, insere as seguintes tags <img>
no final do meu <body>
<img width="0" height="0" src="https://ib.adnxs.com/getuid?https://rxs.roixdelivery.com/delivery/counter?c=1255&CHN=WEB&apid=$UID&rnd=939508138223">
<img src="//p.rfihub.com/cm?in=1&pub=3657&btag=2&csurl=http%3A%2F%2Fs.thebrighttag.com%2Fcs%3Ftp%3Dqw8KooS" width="1" height="1" border="0">
</body>
Estas duas imagens criam um espaço em branco no final da minha página, e eu precisava inserir display: none;
nas mesmas para ocultar este espaço. Porém, tenho alguns problemas:
1 - As imagens são carregadas dinamicamente pelo script, portanto não tenho controle nenhum sobre elas e não consigo colocar nenhuma classe para ocultá-las.
2 - Os seletores: $("body img:last").css("display","none");
e
$("body img:last").prev("img").css("display","none");
funcionariam para capturá-las e aplicar o estilo, porém elas são carregadas após os eventos $(document).ready()
e $(window).load()
e portanto os seletores não funcionam.
3 - Não pretendo usar nada como setInterval, pois caso estas imagens não tenham sido carregadas ainda após o período que eu especificar, outras imagens serão ocultadas erroneamente. Porém, tenho certeza de que estas são as ultimas imagens a serem carregadas no <body>
Como posso contornar esta situação?
document.addEventListener("DOMContentLoaded", fn());
?