fFade in charge la moitié de l'image - javascript, jquery, html, slider, fadein

J'ai un slider. Lorsque je clique sur le bouton Suivant, l'image passe à l'image suivante. Sur localhost, cela fonctionne parfaitement. Sur le serveur, certaines images s’enfouissent en moitié. J'ai 39 images à glisser. La taille de l’image est d’environ 480 ko. (728x500 pixels en tout). (Noms des images: 0.png 1 .png ----> 38.png)

Je n’ai pas mis les codes CSS pour éviter trop de lignes de code.

Voici le code JS:

var res = 1;
$(document).ready(function(e) {
$("#slider>img").fadeOut();
$("#slider>img#0").fadeIn();

function nextPic() {
if (res > 38) // redirect to some page.
$("#slider > img").fadeOut();
$("#slider > img#" + res).fadeIn();
res = res + 1;
}
}

Voici le code HTML:

<script src="/images/https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
<div id="slider"><?php
for($i = 0; $i < 39; $i++)
echo "<img id="".$i."" src="/images/testPlates/".$i.".png"/>";
?></div>
<div id="inputOne">
<input type="button" value="Next Slide" onClick="nextPic();"/>
</div>

Voici quelques images qui en ont chargé une partie:

Mais l'image doit ressembler à ceci:

EDİT: pour la démonstration en direct: (il y a un bouton en dessous de l’image div., Vous pouvez cliquer dessus.)

http://www.renkligorme.com/problem.php

Réponses:

c'est à cause de ma vitesse de connexion. Donc, à partir de maintenant, je vais tester mes pages qui ont un problème chez un autre fournisseur d'accès Internet