रद्द एचटीएमएल 5 ब्राउज़रों में एकल छवि अनुरोध

Question

मैं (बड़े) छवियों को लोड कर रहा हूँ गतिशील रूप से एक एचटीएमएल 5 कैनवास में आकर्षित करने के लिए, कुछ इस तरह:

var t = new Image(); 
t.onload = ... 
t.src = 'http://myurl'; 

लेकिन हर एक बार थोड़ी देर में चाहते हैं छवि को रद्द करने पूरी तरह से अनुरोध करें।

एकमात्र तरीका जिस पर मैं आया था src'' पर सेट कर रहा है। अर्थात

t.src = '' 

यह कई ब्राउज़रों में काम करता है, लेकिन ऐसा लगता है कि केवल फ़ायरफ़ॉक्स वास्तव में छवि के लिए http अनुरोध को रद्द करता है।

मैंने कैशिंग को अक्षम करने और "मॉडेम गति अनुकरण" सक्षम करके Fiddler2 के साथ इसका परीक्षण किया। तब a fiddle to test canceling a image request. चल (मैं यह कैसे परीक्षण करने के लिए पर अन्य विचारों को सुनना पसंद करेंगे)

मुझे पता है कि सभी अनुरोधों (as in this question) को रद्द करने के तरीके हैं, लेकिन मैं केवल एक रद्द करना चाहते हैं।

ऐसा करने के लिए अन्य तरीकों (विशेष रूप से मोबाइल ब्राउज़र पर) पर कोई विचार?

Answer 1

यह एकमात्र तरीका है कि मैं इसे सभी आधुनिक ब्राउज़रों (क्रोम, सफारी, मोबाइल-सफारी, फ़ायरफ़ॉक्स, और आईई 9) में काम करने में कामयाब रहा।

• लोड एक खाली और छिपा iframe
• iframe
• में body के लिए एक image tag संलग्न जब img.onload पूरा करता है, आप के साथ एक HTML5 कैनवास को आकर्षित करने के लिए कि छवि डोम तत्व का उपयोग कर सकते drawImage()
• अगर आप लोड को रद्द करना चाहते हैं, तो iframe के contentWindow (या execCommand("stop", false) पर contentDocument पर आईई) पर जारी करें। छवि लोड को रद्द करने के बाद
• , आप अधिक छवियों को लोड करने के लिए iframe का पुन: उपयोग कर सकते हैं।

मैं GitHub पर इस बात के लिए एक वर्ग बनाया है, और coffeescript कोड डाल (और यह जावास्क्रिप्ट संकलित की गई हैं): Cancelable Html5 Image Loader

आप इसके साथ खेलने के लिए चाहते हैं, तो मैं भी एक jsfiddle to test it out बनाया। यह देखने के लिए कि वास्तविक नेटवर्क अनुरोध वास्तव में रद्द किया जा रहा है, फिडलर 2 (या ऐसा कुछ) शुरू करना याद रखें।

Answer 2

आप सभी अनुरोधों को रोकने के लिए window.stop() को आजमा सकते हैं, लेकिन व्यक्तिगत नहीं। आईई में, यह window.stop() नहीं है document.execCommand ("रोकें", झूठा)।

यदि आपके पास अनुरोध के अनुसार अन्य सामान मिल रहे हैं, तो ऐसा करने से इसमें हस्तक्षेप होगा। (आप संसाधनों के पुन: अनुरोध के साथ अनुवर्ती करेंगे जो आप अभी भी चाहते हैं, लेकिन यह कड़ी मेहनत की तरह बहुत अधिक है)।

---

तो अगर आप एक बड़ी छवि के लिए एक अनुरोध को रोकने के लिए चाहता था, एक छिपा iframe के भीतर एक दस्तावेज़ में छवि को लोड है कि आप क्या कर सकता है। IFRAME की ऑनलोड घटना का उपयोग मुख्य दस्तावेज़ में छवि को लोड करने के लिए किया जा सकता है, जिसके द्वारा इसे कैश किया जाना चाहिए (मान लें कि आपके पास ऐसा करने के लिए कॉन्फ़िगर किए गए कैशिंग निर्देश हैं)।

यदि छवि बहुत अधिक समय ले रही है, तो आप IFRAME की सामग्री तक पहुंच सकते हैं और उस पर स्टॉप कमांड जारी कर सकते हैं।

आपको कई IFRAME तत्वों की आवश्यकता है क्योंकि छवियां हैं जिनसे अनुरोध किया जा सकता है।

Answer 3

मुझे संदेह है कि यह हैक के बिना ऐसा करने के लिए एक क्रॉस-ब्राउज़र तरीका है। एक सुझाव है कि एक सर्वर-साइड स्क्रिप्ट के लिए AJAX अनुरोध करना है जो छवि के बेस 64 एन्कोडेड संस्करण को लौटाता है जिसे आप src विशेषता के रूप में सेट कर सकते हैं। फिर आप छवि को लोड करना रद्द करने का निर्णय लेते हैं तो आप इस अनुरोध को रद्द कर सकते हैं। यदि आप छवि को क्रमिक रूप से दिखाना चाहते हैं तो यह मुश्किल हो सकता है।

Answer 4

मुझे वास्तव में एक ही समस्या है और कुछ परीक्षण किए हैं।

मैंने iframes के साथ कुछ परीक्षण किए हैं और कुछ सफलता प्राप्त की है। फ़ायरफ़ॉक्स 3.6 और क्रोम पर परीक्षण किया गया। परीक्षणों के लिए मैंने 1512b की 9 छवियों का उपयोग किया। आईएमजी प्रीलोडिंग के साथ मैंने कई बार अपने फ़ायरफ़ॉक्स को मार डाला (हाँ, इस कंप्यूटर पर ज्यादा मेमोटी नहीं), आईएमजी का उपयोग करके "निलंबन" कार्रवाई छवि लोडिंग को रोक नहीं देती है अगर अनुरोध शुरू हो गया है, तो iframes के साथ निलंबन कार्रवाई वास्तव में डाउनलोड को रोकती है (जैसा कि मैं iframe हटा दें)। अगला चरण XMLHttpRequests के साथ परीक्षण करेगा।चूंकि मेरे टेस्ट कोड का यह संस्करण ब्राउसर कैश व्यवहार का उपयोग कर रहा है, दूसरी यूआरएल को रोकने के लिए छवि यूआरएल बनाता है और यह AJAX अनुरोधों के साथ-साथ काम करता है। लेकिन शायद iframes के साथ मैं सीधे आईफ्रेम में लोड छवि से बाइनरी डेटा पुनर्प्राप्त करने का एक तरीका ढूंढ सकता हूं (उसी डोमेन यूआरएल पर सीमा के साथ)। fillde यह परीक्षण करने के लिए है

// jQuery.imageload.shared.list contains an array of oversized images url 
jQuery.each(imglist,function(i,imgsrc) { 

    name = 'imageload-frame'; 
    id = name + "-" + i; 
    // with img it is not possible to suspend, the get is performed even after remove 
    //var loader = jQuery('<img />').attr('name', name).attr('id',id); 
    var loader = jQuery('<iframe />').attr('name', name).attr('id',id); 

    //no cache on GET query taken from jQuery core 
    // as we really want to download each image for these tests 
    var ts = +new Date; 
    // try replacing _= if it is there 
    var ret = imgsrc.replace(/(\?|&)_=.*?(&|$)/, "$1_=" + ts + "$2"); 
    // if nothing was replaced, add timestamp to the end 
    imgsrc = imgsrc + ((ret == imgsrc) ? (imgsrc.match(/\?/) ? "&" : "?") + "_=" + ts : ""); 

    loader.css('display', 'none').appendTo('body'); 
    loader.after(jQuery('<a>') 
      .text(' stop ') 
      .attr('href','#') 
      .click(function(){ 
       loader.remove(); 
       jQuery(this).text(' suspended '); 
      }) 
    ); 

    // start the load - preload 
    loader.attr('src',imgsrc); 

    // when preload is done we provide a way to get img in document 
    loader.load(function() { 
     jQuery(this).next("a:first") 
      .text(" retrieve ").unbind('click') 
      .click(function() { 
       var finalimg = jQuery('<img />'); 
       // browser cache should help us now 
       // but there's maybe a way to get it direclty from the iframe 
       finalimg.attr('src',loader[0].src); 
       finalimg.appendTo('body'); 
      }); 
    }); 
}); 

संपादित और यहाँ:

यह मेरा परीक्षण कोड (वास्तव में क्रोम पर तेजी से, बहुत ज्यादा बहुत बड़ी छवियों के साथ अपने फ़ायरफ़ॉक्स को मार सकता है) है http://jsfiddle.net/wPr3x/