fFade in loads half of image

Question

I have a slider. When I click next button the picture changes to next. On localhost it's working perfect. On server, some of images fadein half of it. I have 39 picture to slide. The picture size is about 480 kb. (728x500 pixel all of it). (picture names: 0.png 1.png ----> 38.png)

I didn't put css codes in order to prevent to much code lines.

Here is JS code:

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;
    }
}

Here is HTML code:

<script src="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='testPlates/".$i.".png'/>"; 
?></div>
<div id="inputOne">
    <input type="button" value="Next Slide" onClick="nextPic();"/>
</div>

Here is the some of picture that loaded a part of it:

But the picture must look like this:

EDİT: for live demo:(there is a button below the picture div. you can click it.)

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

Answer 1

it's because of my connection speed. So, from now, i will test my pages that has problem at another internet provider