Solution:

Well, actually from the beginning I was doing right, the problem is that the image was loaded into a hidden div, so when I showed the hidden div with the image inside, then yes the image would be rendered. p>

With this, I loaded the page with all the div's visible and with the loading div on top of all of them, when the page finishes loading I hide all the divs (except the one I want to show the user) and the image appears fully rendered!

PS: It is not recommended to use images as large as 4mb. Because even after it is loaded, the rendering of the same by the browser is slow and ends up being shown in parts.

Problem solved!

Thank you to all who accompanied and somehow tried to help!

You can do a event load for each image that returns from Ajax and call a function when they are all loaded.

One suggestion would be to create a div hidden to get Ajax return with the images, count how many images returned and make a .each() creating a on load for each. The images will be loading hidden in div , and when they all load, you send the HTML of that div to the div finite% and fadeIn() .

Create a div hidden anywhere:

<div id="oculta"></div>

And put her CSS:

#oculta{
   display: none;
}

Create a function that will transition:

function mostraDiv(){
   // envia o HTML da div oculta e faz o fadeIn na div principal
   $("#div-da-aba").html( $("#oculta").html() ).hide().fadeIn();
   $("#oculta").empty(); // esvazia div oculta
}

No% of Ajax%:

success: function(data){
   $("#oculta").html(data); // envia o retorno para a div oculta

   var imgs = $("img", "#oculta"); // busca imagens pela tag img
   var imgs_conta = imgs.length; // conta o número de imagens
   var conta = 0; // seta um contador

   // aqui eu crio um event load para cada imagem
   imgs.each(function(i,e){
      e.onload = function(){
         conta++; // quando a imagem é carregada, incremento o contador

         // se o contador alcançar o número de imagens, chamo a função
         if(conta == imgs_conta) mostraDiv();
      }
   });
}

Why did I suggest using a hidden div?

So that in success main you can put a message of "Opening ..." or "Loading ..." or some loader animated while the images are being loaded in hidden.

Simple with pure JavaScript:

document.getElementById('IDdaImagem').addEventListener('load',function(){ 
    this.style.display = 'block'
})

<img width="100px" heigth="100px" id="IDdaImagem" src="https://upload.wikimedia.org/wikipedia/commons/d/dd/Big_%26_Small_Pumkins.JPG"alt="" style="display: none;">

Dai just do the implementation in JQuery and use the effects you want

Note: If it takes too long, wait a little longer, I've got a very large image to make it visible.