मेरा jQuery फ़ंक्शन आईई 8 में 'स्टैक ओवरफ़्लो' त्रुटि क्यों उत्पन्न कर रहा है?

Question

मैं एक साधारण समारोह जो आईई 8 समस्या में एक स्टैक ओवरफ़्लो त्रुटि होती है किसी भी अन्य ब्राउज़र में होने के लिये हालांकि मैं परीक्षण नहीं किया है IE 7 या 6.

सटीक त्रुटि पालन है प्रकट नहीं होता है: -

SCRIPT28: Out of stack space 
jquery.min.js, line 2 character 7498 
SCRIPT2343: Stack overflow at line: 2 

सवाल में समारोह:

function switchImage(size, objid, prefix, fullimage){ 

    if(size !== 'full'){ 
     var image = prefix + size + '/' + size +'_' + fullimage; 
    } 
    else { 
     var image = prefix + size + '/' + fullimage; 
    } 

    $('#' + objid).data('type', size) 
     .append('<img id="preload" src="' + image + '" style="display:none;" />') 
      .find('#preload').load(function(){ 
       $('#' + objid).find('img').attr('src', image); 
       $(this).remove(); 
      }); 
} 

उपयोग के मामले के एक सिंहावलोकन देने के लिए मैं इस समारोह के प्रयोजन की व्याख्या करेगा:

जब कोई उपयोगकर्ता किसी छवि का आकार बदलता है (jqueryUI आकार का उपयोग करके) चौड़ाई/ऊंचाई की तुलना किसी अन्य फ़ंक्शन में की जाती है।

एक बार जब छवि एक निश्चित आकार के हो जाती है तो इस फ़ंक्शन को तब कहा जाता है जिसे आप देख सकते हैं, छवि के उच्च रिज़ॉल्यूशन संस्करण की 'src' विशेषता के साथ डीओएम में छुपा <img> तत्व जोड़ता है (या निचला यदि छवि उपयोगकर्ता द्वारा आकार छोटा किया जा रहा है।

एक बार जब यह लोड किया गया है दिखाई तत्व की src विशेषता अद्यतन किया जाता है और छिपे हुए तत्व निकाल दिया जाता है।

इस उपयोगकर्ता आकार बदलता है के रूप में छवियों के उत्कृष्ट गतिशील स्विचिंग साबित कर दिया उन्हें छवि की गुणवत्ता को पूरे प्रक्रिया में अच्छी तरह से रखना ....

मैं केवल आईई 8 में समस्या का कारण बनने के लिए प्रतीत नहीं कर सकता। इस फ़ंक्शन के साथ कोई त्रुटि नहीं हुई है, और हालांकि त्रुटि मौजूद है, फ़ंक्शन अभी भी काम करता है जैसा कि इसे करना चाहिए (हालांकि प्रदर्शन का आकार बदलना IE में भी खराब है 8)।

किसी भी मदद की सराहना की जाएगी।

अद्यतन: मैं निम्नलिखित करने के लिए समारोह दोबारा लिख ​​कर मूल समस्या हल हो जाती हैं लगता है: -

function switchImage(size, objid, prefix, fullimage){ 

    var $el = $('#' + objid); 

    if(size !== 'full'){ 
     var image = prefix + size + '/' + size +'_' + fullimage; 
    } 
    else { 
     var image = prefix + size + '/' + fullimage; 
    } 

    $el.data('type', size); 

    $('<img id="preload" src="' + image + '" style="display:none;" />') 
     .appendTo($el) 
      .one('load', function(){ 
       $('#' + objid).find('img').attr('src', image); 
        $(this).remove(); 
       }); 
} 

आप देख सकते हैं, केवल वास्तविक अंतर यह है कि मैं .appendTo का उपयोग कर रहा है() .append() के साथ-साथ jQuery .one() विधि का उपयोग करके यह सुनिश्चित करने के लिए कि लोड ईवेंट केवल एक बार होता है। हालांकि चूंकि तत्व सीधे बाद में हटा दिया जाता है, मुझे समझ में नहीं आता कि इससे कोई फर्क क्यों पड़ता है।

मुझे वास्तव में यह देखने में दिलचस्पी होगी कि कोई इस पर कोई प्रकाश डाल सकता है ताकि मैं भविष्य में ऐसे मुद्दों से बचने के तरीके सीख सकूं। चीयर्स।

Answer 1

यदि आपका $(this).remove() नहीं था तो आपका प्रारंभिक फ़ंक्शन सीधे अनंत लूप में चला होगा। अनिवार्य रूप से आप जो कर रहे थे वह src विशेषता पर सभीimg टैग्स को प्रीलोड छवि समेत सेट कर रहा था। क्रियान्वित (Firebug में असीम console.log('loaded') साथ $(this).remove() की जगह और पाश इसे देखना)

मुझे लगता है कि होता है कि IE8 में, एक बार विशेषता के रूप में अच्छी तरह से प्रीलोड छवि के लिए सेट है, वह आपके 'लोड' ईवेंट हैंडलर पहले लागू से पहले अगली पंक्ति जो $(this).remove() (स्टैक ओवरफ़्लो समझाती है), जबकि अन्य ब्राउज़रों ने पहले पूरे फ़ंक्शन को पहले निष्पादित कर लिया होगा, इस प्रकार प्रीलोड छवि को हटाया जा सकता है, जो अनंत लूप को रोकता है।(यह सिर्फ एक अनुमान है)

प्रारंभिक संस्करण में एक बंदर पैच .find('img') के बजाय .find('img:not(#preload)') का उपयोग करना होगा।

आपका पैच अनंत लूप को भी रोकता है क्योंकि .one() यह केवल एक बार चलाने के लिए सुनिश्चित करता है।

लेकिन अंतत मैं निम्नलिखित करने के लिए समारोह refactor होगा:

function switchImage(size, objid, prefix, fullimage){ 

    var $el = $('#' + objid), 
     $image = $el.find('img'), 
     $preload = $('<img>'); 

    if(size !== 'full'){ 
     var image = prefix + size + '/' + size +'_' + fullimage; 
    } 
    else { 
     var image = prefix + size + '/' + fullimage; 
    } 

    $el.data('type', size); 

    $preload 
     .on('load', function() { 
      $image.attr('src', image); 
     }) 
     .attr('src', image); 
} 

भी ध्यान रखें कि प्रीलोड छवि वास्तव में स्पष्ट रूप से डोम में जोड़ा जाता करने के लिए अपने उद्देश्य को पूरा करने के लिए की जरूरत नहीं है।