छवि के आधा भार में fFade - जावास्क्रिप्ट, jquery, एचटीएमएल, स्लाइडर, fadein

मेरे पास एक स्लाइडर है। जब मैं अगला बटन क्लिक करता हूं तो तस्वीर अगले में बदल जाती है। स्थानीयहोस्ट पर यह सही काम कर रहा है। सर्वर पर, कुछ छवियों में से आधा फीका है। मेरे पास स्लाइड करने के लिए 39 तस्वीर है। चित्र का आकार लगभग 480 केबी है (728x500 पिक्सेल यह सब)। (चित्र नाम: 0.png 1 .png ----> 38.png)

मैंने कोड कोड को रोकने के लिए सीएसएस कोड नहीं लगाए।

जेएस कोड यहां है:

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

यहां 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>

यहां कुछ तस्वीर है जो इसका एक हिस्सा लोड करती है:

लेकिन तस्वीर इस तरह दिखनी चाहिए:

EDİT: लाइव डेमो के लिए: (चित्र div के नीचे एक बटन है। आप इसे क्लिक कर सकते हैं।)

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

उत्तर:

यह मेरी कनेक्शन की गति के कारण है। इसलिए, अब से, मैं अपने पृष्ठों का परीक्षण करूंगा जिनके पास किसी अन्य इंटरनेट प्रदाता में समस्या है