XMLHttpRequest जेएस छवि लोडिंग

Question

मैं ऐसी वेबसाइट बनाना चाहता हूं जो XMLHttpRequest() के माध्यम से एक छवि लोड करे। (XMLHttpRequest क्योंकि मैं उपयोगकर्ता एक% प्रगति का प्रतिनिधित्व करना चाहते हैं)

मेरे कोड:

var req = new XMLHttpRequest(); 

req.addEventListener("progress", onUpdateProgress, false); 
req.addEventListener("load", onTransferComplete, false); 
req.addEventListener("error", onTransferFailed, false); 
req.addEventListener("abort", onTransferFailed, false); 

req.open("GET", "image.png", true); 
req.send(); 

function onUpdateProgress(e) { 
if (e.lengthComputable) { 
var percent_complete = e.loaded/e.total; 
if (Math.round(percent_complete*200)>=20) { 
        $("#progress").animate({ 
        width: Math.round(percent_complete*100) 
      }, 0); 
     } 
     } 
} 

function onTransferFailed(e) { 
    alert("Something went wrong. Please try again."); 
} 

function onTransferComplete(e) { 
    //Problem 
} 

मेरे समस्या मैं नहीं है पता छवि जो अब लोड किया जाता है को दिखाने के लिए कैसे है। मुझे उम्मीद है कि कोई मेरी मदद कर सकता है :) धन्यवाद ...

Answer 1

आप डेटा यूआरआई का उपयोग करके ऐसा कर सकते हैं, लेकिन यह सभी मौजूदा ब्राउज़रों में यह काम करना मुश्किल है।

यदि कैशिंग विकल्प सही तरीके से सेट किए गए हैं, तो आप इसे दो बार बेहतर लोड कर सकते हैं: पहले अपने AJAX अनुरोध का उपयोग करके, फिर, छवि द्वारा ब्राउज़र द्वारा कैश किए जाने के बाद, सामान्य छवि कार्यों का उपयोग करने के बाद। दूसरी बार आपकी छवि को फिर से सर्वर से पुनर्प्राप्त नहीं किया जाएगा, लेकिन ब्राउज़र कैश्ड फ़ाइल का उपयोग करेगा और छवि को लगभग तुरंत दिखाएगा।