I have on my page the following google script:
<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>
...
When rendering the page, it inserts the following <img>
tags at the end of my <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"><imgsrc="//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>
These two images create a blank space at the bottom of my page, and I needed to insert display: none;
into them to hide this space. However, I have some problems:
1 - Images are loaded dynamically by the script, so I have no control over them and I can not put any class to hide them.
2 - The selectors: $("body img:last").css("display","none");
e
$("body img:last").prev("img").css("display","none");
would work to capture them and apply the style, however they are loaded after the events $(document).ready()
and $(window).load()
and therefore the selectors do not work.
3 - I do not intend to use anything like setInterval, because if these images have not been uploaded yet after the period I specify, other images will be hidden in error. However, I'm sure these are the last images to load in <body>
How can I get around this?