Hide element after it is loaded on page

Asked

Viewed 274 times

1

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>
...

Which, when rendering the page, inserts the following tags <img> 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&amp;CHN=WEB&amp;apid=$UID&amp;rnd=939508138223">
  <img src="//p.rfihub.com/cm?in=1&amp;pub=3657&amp;btag=2&amp;csurl=http%3A%2F%2Fs.thebrighttag.com%2Fcs%3Ftp%3Dqw8KooS" width="1" height="1" border="0">
</body>

These two images create a blank at the bottom of my page, and I needed to insert display: none; in the same to hide this space. However, I have some problems:

1 - Images are dynamically loaded by the script, so I have no control over them and can’t put any class to hide them.

2 - The selectors: $("body img:last").css("display","none"); and $("body img:last").prev("img").css("display","none"); would work to capture them and apply the style, but 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 as setInterval, because if these images have not been loaded even after the period I specify, other images will be hidden erroneously. However, I’m sure these are the last images to be uploaded into <body>

How can I get around this situation?

javascript jquery html css

  • What if you do so? $("body img:last"). on('load', Function() { console.log("image Loaded correctly"); }) . on('error', Function() { console.log("error loading image"); }) . attr("src", $(originalImage).attr("src")) ;

  • Have you tried document.addEventListener("DOMContentLoaded", fn()); ?

  • @Paulohdsousa your script didn’t work on my page :/

  • @devgaspa continue with the same problem. Images are loaded after running this script.

  • @Victoralencarsantos and if you make a callback for this function ?

  • @devgaspa, do you say to the function that adds the images? If yes, I have no way to access it, the Google script does this internally.

Show 1 more comment

1 answer

1

I managed to solve!

I hadn’t stopped to think that adding a css display: none with the selectors body > img:last-child and body > img:nth-last-child(2) would cause only these images to apply to the rule.

Thank you all for your help!

Browser other questions tagged javascript jquery html css

You are not signed in. Login or sign up in order to post.