जावास्क्रिप्ट - जावास्क्रिप्ट, jquery, छवि, कैशिंग, गतिशील का उपयोग कर पेज लोड से पहले सरणी से गतिशील छवियों को कैश करें

मैं 4 स्लाइडिंग गैलरी बनाने की कोशिश कर रहा हूं, लेकिन मुझे गैलरी फॉर्म में छवियों को प्रदर्शित करने से पहले एक स्प्लैश स्क्रीन के पीछे सभी छवियों को लोड (कैश) करने की आवश्यकता है। मैं "jPreLoader v2" का उपयोग करने की कोशिश कर रहा हूं - http://www.inwebson.com/jquery/jpreloader-a-preloading-screen-to-preload-images“लेकिन किस्मत से नहीं।

नीचे दिया गया कोड है कि मैं कैसे कोशिश कर रहा हूंप्रत्येक गैलरी निर्देशिका से सभी छवियों को एक ही गैलरी पर पहले से लोड करने के बाद, एक बार लोड करने के बाद पूरी गैलरी को हटा दें और प्रत्येक गैलरी को एक बार में प्रदर्शित करें।

var pictures =  [
"1.jpg",
"2.jpg",
"3.jpg",
"4.jpg",
.......,
"30.jpg"
]

$(window).load(function(){

preLoad();

function preLoad(){
var max = 30;
var pic;
picture = "<table id="table" style="dipslay:table;"><tr>";
for (var i=0;i < max; i++){
if(i < 30){
pic = "images/art/"+pictures[i];
appendCell(pic);
}
if(i < 17){
pic = "images/street/"+pictures[i];
appendCell(pic);
}
if(i < 19){
pic = "images/doc/"+pictures[i];
appendCell(pic);
}
if(i < 16){
pic = "images/commercial/"+pictures[i];
appendCell(pic);
}
};
picture += "</tr></table>";
$("#imageScroller").append(picture);
}

function appendCell(pic){
picture +="<td class="image"><img class="i" src="/images/"+pic+""></td>";
return;
}
});

मुझे यकीन नहीं है कि कैसे पहले से ही डोम में डाला के बजाय ऊपर एक गतिशील छवि लोडिंग लूप पर जिपर लोडर को लागू करना है।

$(document).ready(function () {
$("body").jpreLoader();
});

धन्यवाद।

उत्तर:

कस्टम प्रगति बार जो कि छवियों के रूप में अपडेट होती है, डाउनलोड की जाती है

var pictures = [
"1.jgp",
"2.jpg"
];

var loadedSoFar = 0;

function loaded( ) {
// do stuff
}

function updateProgress( ) {

loadedSoFar++;

var newWidth = $("#progress").width() * ( loadedSoFar / pictures.length );
$("#bar").stop( true, true );
$("#bar").animate({ width: newWidth }, 500, function( ) {
if( loadedSoFar === pictures.length ) { loaded() }
});
}

for( var i = 0; i < pictures.length; i++ ) {
var img = new Image();
img.src = pictures[ i ] + i;

img.onload = function( ) {
updateProgress();
}
}

डेमो यहाँ