1

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

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?

6
  • E se você fizer assim? $("body img:last").on('load', function() { console.log("image loaded correctly"); }) .on('error', function() { console.log("error loading image"); }) .attr("src", $(originalImage).attr("src")) ; Commented 9/11/2015 às 15:37
  • Já tentou document.addEventListener("DOMContentLoaded", fn()); ? Commented 9/11/2015 às 16:21
  • @PauloHDSousa seu script não funcionou na minha página :/ Commented 9/11/2015 às 17:23
  • @devgaspa continuo com o mesmo problema. As imagens são carregadas após a execução desse script. Commented 9/11/2015 às 17:25
  • @VictorAlencarSantos e se você fizer um callback para está função ? Commented 9/11/2015 às 17:29

1 Resposta 1

1

Consegui resolver!

Não tinha parado pra pensar que adicionando um css display: none com os seletores body > img:last-child e body > img:nth-last-child(2) faria com que somente essas imagens fossem aplicadas à regra.

Obrigado à todos pela ajuda!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .