जावास्क्रिप्ट ब्लॉक स्क्रिप्ट निष्पादन

Question

मैं इस तरह से कुछ करने की जरूरत है:

• कोड का एक टुकड़ा
• प्रारंभ निष्पादित एक छवि लोड और स्क्रिप्ट निष्पादन
• ब्लॉक करने के लिए छवि को फिर से शुरू निष्पादन भरी हुई है
• कोड के बाकी निष्पादित

मुझे पता है कि सबसे आसान तरीका छवि एक के ऑनलोड घटना पर एक समारोह आवंटित करने के लिए है और फिर फ़ंक्शन में शेष कोड निष्पादित करें, लेकिन यदि यह संभव है तो मैं स्क्रिप्ट निष्पादन को अवरुद्ध करने वाला "रैखिक" व्यवहार करना चाहता हूं और फिर इसे फिर से शुरू करना चाहता हूं। तो, क्या ऐसा करने के लिए एक क्रॉस-ब्राउज़र तरीका है?

Answer 1

स्क्रिप्ट निष्पादन ब्लॉक करने के लिए एक ही रास्ता है कर सकते हैं की कोशिश आपके वेब पेज के साथ कोई बातचीत।

फ़ायरफ़ॉक्स, क्रोम, सफारी, ओपेरा और आईई सभीcomplete संपत्ति का समर्थन करते हैं, जिसे अंततः HTML5 में मानकीकृत किया गया था। इसका अर्थ यह है कि जब तक छवि डाउनलोड समाप्त नहीं हो जाती है तब तक आप स्क्रिप्ट निष्पादन को रोकने के लिए while पाश का उपयोग कर सकते हैं।

var img = new Image(); 
img.src = "/myImage.jpg"; 
document.body.appendChild(img); 
while (!img.complete) 
{ 
    // do nothing... 
} 

// script continues after image load 

ऐसा कहा जा रहा है कि, मुझे लगता है कि आपको ब्राउज़र को लॉक किए बिना अपना लक्ष्य प्राप्त करने के तरीकों को देखना चाहिए।

Answer 2

आप एक preprocessing कदम होने से परहेज नहीं करते हैं, तो एक पाश है, जो भी अधिकांश ब्राउज़र बंद होगा का उपयोग करें और रोकने के लिए Narrative Javascript, जो आप

image.onload = new EventNotifier(); 
image.onload.wait->(); 

Answer 3

यह सुझाव बिल्कुल वही नहीं है जो आपने पूछा था, लेकिन मैं इसे एक संभावित विकल्प के रूप में पेश करता हूं।

पृष्ठभूमि-छवि के साथ एक सीएसएस क्लास बनाएं जिसका आप उपयोग करना चाहते हैं। जब आपका ऐप शुरू होता है, तो इस सीएसएस क्लास को एक डीआईवी को असाइन करें जो या तो साइट से छिपा हुआ है या शून्य पिक्सल से शून्य तक आकार में है। यह सुनिश्चित करेगा कि छवि सर्वर से लोड हो। जब आप छवि (ऊपर दो चरण) लोड करना चाहते हैं, तो आपके द्वारा बनाई गई सीएसएस कक्षा का उपयोग करें; यह जल्दी हो जाएगा। शायद जल्दी से पर्याप्त है कि आपको बाद के कोड निष्पादन को अवरुद्ध करने की आवश्यकता नहीं है?

Answer 4

मैं स्क्रिप्ट निष्पादन को पूरी तरह से अवरुद्ध करने की कोशिश नहीं करता, क्योंकि ब्राउज़र धीमा हो सकता है, या यहां तक ​​कि उपयोगकर्ता को चेतावनी भी दे सकता है कि एक स्क्रिप्ट निष्पादित करने में बहुत अधिक समय ले रही है।

आप क्या कर सकते हैं काम खत्म करने के लिए घटनाओं का उपयोग करके अपने कोड को 'रैखिकरण' कर सकते हैं। आपको फ़ंक्शन में समय निकालना होगा, क्योंकि छवि कभी लोड नहीं हो सकती है।

उदाहरण:

var _img = null; 
var _imgDelay = 0; 
var _finished = false; 

function startWork(){ 
    _img = document.createElement('img'); 
    _img.onload = onImgLoaded; 
    _img.src = 'yourimg.png'; 

    // append img tag to parent element here 

    // this is a time out function in case the img never loads, 
    // or the onload event never fires (which can happen in some browsers) 
    imgTimeout(); 
} 

function imgTimeout(){ 
    if (_img.complete){ 
     // img is really done loading 
     finishWork(); 
    } 
    else{ 
     // calls recursively waiting for the img to load 
     // increasing the wait time with each call, up to 12s 
     _imgDelay += 3000; 

     if (_imgDelay <= 12000){ // waits up to 30 seconds 
     setTimeout(imgTimeout, _imgDelay); 
     } 
     else{ 
     // img never loaded, recover here. 
     } 
    } 
} 

function onImgLoaded(){ 
    finishWork(); 
} 

function finishWork(){ 
    if (!_finished){ 
     // continue here 
     _finished = true; 
    } 
} 

Answer 5

आप XMLHttpRequest का उपयोग करें और तुल्यकालिक मोड का उपयोग कर सकते हैं।

var url = "image.php?sleep=3"; 
var img = new Image; 
var sjax = new XMLHttpRequest(); 
img.src = url; 
sjax.open("GET", url, false); 
sjax.send(null); 
alert(img.complete); 

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

यह मानता है कि छवि कैश अनुकूल http शीर्षलेख के साथ परोसा जाता है। अन्यथा, यह व्यवहार विभिन्न ब्राउज़रों में भिन्न हो सकता है।