जावास्क्रिप्ट का उपयोग कर ग्राफिक्स को अद्यतन करते समय निरंतर यातायात का जोखिम?

Question

मैं एक HTML पृष्ठ पर एक मूल ग्राफिक घड़ी प्रदर्शन बनाने के लिए जावास्क्रिप्ट का उपयोग कर रहा हूँ। मैं अंकों ग्राफिक्स अद्यतन करने कर रहा हूँ (प्रत्येक अंक केवल जब आवश्यक अद्यतन) मानक डोम प्रणाली का उपयोग कर:

digitOne.src = "file/path/one.png"; 

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

तो मुझे आशा है कि कोई मुझे बता सकता है कि यह जोखिम है या जावास्क्रिप्ट में ग्राफिक्स को स्वैप करने के लिए मुझे एक तंत्र में इंगित करें जो गारंटी देता है कि मौजूदा छवि को हर समय नेटवर्क लाने के बजाए स्मृति से उपयोग किया जाएगा।

(मैंने इसके लिए एक निश्चित उत्तर के लिए शिकार किया है, लेकिन मुझे कोई नहीं मिला। मैंने 1 999/2000 से डीएचटीएम के लिए जावास्क्रिप्ट का उपयोग नहीं किया है, इसलिए मैं समय के पीछे थोड़ा सा हूं। कम से कम यह नहीं है प्रत्येक जावास्क्रिप्ट फ़ंक्शन के दो संस्करणों को लिखना आवश्यक है, आईई 4/5 के लिए एक और नेटस्केप के लिए एक 4.)

Answer 1

मैं HTML5 कैनवास 2 डी ड्राइंग का उपयोग करके आपको सलाह दूंगा। इसे किसी भी छवियों की आवश्यकता नहीं है और वर्तमान में आईई में भी सभी ब्राउज़रों के सभी नए संस्करणों द्वारा समर्थित है। चेक इस बाहर

http://www.neilwallis.com/projects/html5/clock/index.php

इस सरल अभी तक महान ट्यूटोरियल पढ़ें:

http://diveintohtml5.info/canvas.html

Answer 2

यदि आप पूरी तरह से सुनिश्चित होना चाहते हैं, तो आप HTML तत्व को अंक की छवि के साथ उत्पन्न कर सकते हैं और इसे स्थानांतरित कर सकते हैं display: none के साथ पृष्ठ पर, इसलिए यह पहले से ही लोड हो चुका है और पृष्ठ पर।

यदि अंक की आवश्यकता हो रही है, तो आप पहले पृष्ठ पर HTML तत्व की जांच करें और इसे ले लें, इसे display: block पर सेट करें या जो कुछ भी आपको चाहिए और उस के साथ वर्तमान अंक तत्व को प्रतिस्थापित करें।

कुछ नमूना कोड के रूप में, मैंने इसे अभी एक साथ रखा है।

var digit_images = ["फ़ाइल/पथ/एक.png", "फ़ाइल/पथ/दो.png", "फ़ाइल/पथ/तीन.png", ...];

function giveMeTheDigit(digit) 
{ 
    var img = digit_images[digit]; 
    var element = $("#digit_holder" + digit); 

    if (element.length == 1) 
    { 
     $(".digit_holder").hide(); //hide the current holder 
     element.show(); //show the new one 
    } 
    else 
    { 
     $('<div class="digit_holder" id="digit_holder' + digit + '"><img src="' + img + '" /></div>') 
      .appendTo("#yourDestination"); 
    } 
} 

यह कोड परीक्षण नहीं किया गया है, लेकिन मुझे लगता है कि आप जानते हैं कि मैं क्या कर रहा हूं और इसे आपकी आवश्यकताओं के अनुसार संपादित कर सकता हूं। सौभाग्य!

Answer 3

यदि सीएसएस सक्षम है, तो निम्न पैटर्न काम करता है। मैं इसे प्रस्तुत कर रहा हूं क्योंकि यह समाधान की तुलना में थोड़ा स्पष्ट है यदि यह नहीं है।

<div id='clock'> 
    <div id='digit0' style="display:block"><!-- ... --></div> 
    <div id='digit1' style="display:none"><!-- ... --></div> 
    <div id='digit2' style="display:none"><!-- ... --></div> 
    <!-- ... --> 
</div> 

अंकों के प्रदर्शन को बदलने के लिए, वर्तमान में दिखाई देने वाले अंक को छुपाएं और अगला दृश्य देखें। जावास्क्रिप्ट केवल समाधान संबंधित है। अदृश्य अंकों को छिपाने के लिए एक अदृश्य <div> बनाएं। व्यक्तिगत अंक <div> तत्व जोड़ें और हटाएं, पुराने डिस्प्ले को डिस्प्ले डिस्प्ले से पुराने डिस्प्ले को डिजिटा स्टोरहाउस तत्व से अगले अंक के साथ बदल दें।

इन दोनों समाधानों में यह व्यवहार है कि डीओएम सबट्री के भीतर छवियां केवल एक बार लाई जाती हैं, क्योंकि उपट्री कभी नहीं हटाए जाते हैं।

Answer 4

आपको यातायात के बारे में चिंता करने की ज़रूरत नहीं है। आवेदन शुरू करते समय छवियों को कैश करना आसान है। निम्नलिखित JSFiddle में मेरा उदाहरण देखें: http://jsfiddle.net/pAwdC/। जब मैं एप्लिकेशन शुरू कर रहा हूं तो मैं loadImages पर कॉल कर रहा हूं। यह विधि प्रत्येक अंक के लिए img DOM तत्व बनाता है। यह src सरणी imagesSrc से लिया जा रहा है।loadImages समारोह ब्राउज़र कहा जाता है जब बना रही है कुछ HTTP सर्वर के लिए अनुरोध प्राप्त:

current.src = imagesSrc[i]; 

निष्पादित होने

असल में प्रत्येक अनुरोध जब किया जाता है।

छवियों को लोड करने के बाद, मैं बस उन्हें छुपा रहा हूं। जब छवियां display: none या visibility: hidden के साथ होती हैं तो उपयोगकर्ता वास्तव में उन्हें नहीं देख सकता है, लेकिन जब आप इन छुपे तत्वों को देखते हैं तो कोई और अनुरोध नहीं किया जाता है, केवल अंतिम repaint, reflow/relayout, restyle ब्राउज़र द्वारा किया जाता है। सभी तत्व कैश किए जाते हैं और केवल तभी प्रदर्शित होते हैं जब आवश्यक हो। आप अपने फायरबग या जो भी अन्य देव उपकरण का उपयोग कर रहे हैं, उसकी जांच कर सकते हैं कि इन छवियों के लिए कोई और अनुरोध नहीं किया गया है।

var images = [], 
    imagesSrc = ['https://lh3.ggpht.com/-107YXK-eAXs/UB6V49H9yuI/AAAAAAAACsY/69ceZJXaYZE/s1600/number-one-.png', 
    'https://lh3.ggpht.com/-8rOrxAwDl48/Txf99Sus18I/AAAAAAAAL1w/VcmeP7rNFwY/s1600/number2c.png', 
    'https://lh3.ggpht.com/-aGatHUidcGw/UG6Oh2HdWXI/AAAAAAAADQY/yc1CTC7cpOY/s1600/number3.png']; 

function loadImages() { 
    var current; 
    for (var i = 0; i < imagesSrc.length; i += 1) { 
     current = document.createElement('img'); 
     current.src = imagesSrc[i]; 
     images.push(current); 
     current.style.display = 'none'; 
     document.body.appendChild(current); 
    } 
} 

function showImage() { 
    var current = showImage.current || 0; 
    if (current >= 3) { 
     current = 0; 
    } 
    hideImages(); 
    images[current].style.display = 'block'; 
    current += 1; 
    showImage.current = current; 
    setTimeout(function() { 
     showImage(); 
    }, 1000); 
} 

function hideImages() { 
    for (var i = 0; i < images.length; i += 1) { 
     images[i].style.display = 'none'; 
    } 
} 

loadImages(); 
showImage(); 

मेरी उदाहरण के लिए मैं प्रत्येक अंक का सिर्फ एक उदाहरण की जरूरत है:

यहाँ मेरी उदाहरण से कोड है। निश्चित रूप से आपकी घड़ी के लिए आप प्रत्येक अंक के लिए चार उदाहरण (चार img डोम तत्व) बना सकते हैं ताकि आप डुप्लिकेट दिखा सकें।

आपके आवेदन के लिए मांग पर छवियों को लोड करने के लिए बेहतर दृष्टिकोण हो सकता है, लेकिन केवल एक बार और फिर उन्हें कैश करें। ऐसा करना अच्छा होता है क्योंकि उपयोगकर्ता प्रत्येक पृष्ठ (0 से 9 तक) देखने के लिए आपके पृष्ठ पर नहीं रह सकता है और आप इस आलसी लोडिंग द्वारा अपना प्रदर्शन थोड़ा बढ़ा सकते हैं। इस रणनीति के लिए आप flyweight pattern देख सकते हैं। इसका मुख्य विचार पुन: प्रयोज्य छोटी वस्तुओं का एक सेट प्रबंधित करना है और इसकी रचना को नियंत्रित करते समय मांग पर उनका उपयोग करना है।

दृष्टिकोण मैं उल्लेख किया है में कई भिन्नताएं हैं: यहाँ एक यूएमएल वर्ग आरेख जो पैटर्न की संरचना को दर्शाता है। हो सकता है कि आप सबसे छोटी भिन्नता हो सकें, एक ही छवि का उपयोग करना जिसमें सभी अंक शामिल हैं। इसके बाद आप अंक के आकार के साथ विभिन्न तत्व (उदाहरण के लिए div) बना सकते हैं। जब आप इन तत्वों को विशिष्ट स्थिति वाले पृष्ठभूमि पर सेट करते हैं तो आप केवल एक ही छवि लोड करके सभी अंक बना सकते हैं। इससे आपके अनुरोध 10 से केवल एक ही हो जाएंगे। उदाहरण के लिए, फेसबुक द्वारा इस दृष्टिकोण का प्रभावी ढंग से उपयोग किया जाता है।

यदि आपको और सहायता की आवश्यकता है तो मुझे सहायता करने में खुशी होगी।