कैसे preloader और कई छवियों के साथ लोड हो रहा है स्थिति प्रदर्शित करने के?

वोट
2

मैं कुछ सौ छवियों के साथ एक स्लाइड शो का निर्माण कर रहा हूँ और, एक अच्छा लोडिंग बार का निर्माण करना चाहते हैं इसलिए यह विचार जावास्क्रिप्ट का उपयोग कर छवियों प्रीलोड करने की है, तो यूआई समापन के बाकी को प्रारंभ किया गया था।

छवियों प्रीलोड करने के लिए एक समस्या नहीं है, लेकिन ब्राउज़र हो रही स्थिति को अपडेट करने के रूप में चीजों को लोड है। मैं कुछ चीजें की कोशिश की है, लेकिन ब्राउज़र केवल प्रदर्शन फिर से रंगना होगा इसके पूर्ण हो जाने के बाद।

मैं भी से स्क्रिप्ट की कोशिश की है इस सवाल है, लेकिन मैं एक ही परिणाम मिलता है।

यहाँ मैं अब तक क्या आपके पास यह है (imgList फ़ाइल नाम। मैं उपयोग कर रहा हूँ की एक सरणी है प्रोटोटाइप ।)

var imageBuf = []
var loadCount = 0
$('loadStatus').update(0/+imgList.length)

function init() {
    imgList.each(function(element){
        imageBuf[element] = new Image()
        //imageBuf[element].onload = window.setTimeout(count(),0) // gives not implemented error in IE
        imageBuf[element].onload = function(){count()}
        imageBuf[element].src = thumbs/+element
    })
}

function count() {
    loadCount++
    $('loadStatus').update(loadCount+/+imgList.length)
}

init()  
02/12/2008 को 14:30
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


1 जवाब

वोट
3

से समारोह का उपयोग करके देखें इस सवाल का मेरा उत्तर :

function incrementallyProcess(workerCallback, data, chunkSize, timeout, completionCallback) {
  var itemIndex = 0;
  (function() {
    var remainingDataLength = (data.length - itemIndex);
    var currentChunkSize = (remainingDataLength >= chunkSize) ? chunkSize : remainingDataLength;
    if(itemIndex < data.length) {
      while(currentChunkSize--) {
        workerCallback(data[itemIndex++]);
      }
      setTimeout(arguments.callee, timeout);
    } else if(completionCallback) {
      completionCallback();
    }
  })();
}


// here we are using the above function to take 
// a short break every time we load an image
function init() {
  incrementallyProcess(function(element) {
    imageBuf[element] = new Image();
    imageBuf[element].onload = function(){count()};
    imageBuf[element].src = "thumbs/"+element;
  }, imgList, 1, 250, function() { 
    alert("done loading"); 
  });
}

आप इसे व्यवहार करने के लिए, जैसा कि आपने यह करना चाहते हैं पाने के लिए हिस्सा आकार पैरामीटर के साथ-साथ समय समाप्ति की लंबाई को संशोधित कर सकते हैं। मैं 100% यकीन है कि यह आप के लिए काम करेंगे नहीं हूँ, लेकिन यह एक कोशिश के लायक है ...

02/12/2008 को 14:54
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more