स्रोत परिवर्तन पर बड़ी छवि झिलमिलाहट रोकें

Question

मुझे बड़ी छवियों के साथ छवि झिलमिलाहट में समस्या है। मेरी body में मैं 5 छवियों है:

<img id="img1" src="img1.png" width="250"> 
<img id="img2" src="img2.png" width="250"> 
<img id="img3" src="img3.png" width="250"> 
<img id="img4" src="img4.png" width="250"> 
<img id="img5" src="img5.png" width="250"> 

और एक मैं jQuery UI के साथ उनमें से एक को खींच रहा हूँ, सब बदल रहे हैं उनके src और dragend पर और साथ:

function dragStart() { 
     $('#img2').attr('src','newimg2.png'); 
     $('#img3').attr('src','newimg3.png'); 
     $('#img4').attr('src','newimg4.png'); 
     $('#img5').attr('src','newimg5.png'); } 

तो ठीक तो अच्छा। लेकिन मुझे बड़ी छवियों (2000 x 2000px) का उपयोग करने की आवश्यकता है क्योंकि सभी छवियों को क्लिक किया जा सकता है और फिर वे व्यूपोर्ट के पूर्ण आकार को एनिमेट करेंगे कि वे पिक्सेललेट नहीं करते हैं।

$this.animate(
       { width: 1800, top: -650, left: -250 }, 

       { 
        duration: 4000, 
        easing: 'easeOutElastic' 
       }) 

मुझे लगता है कि हर छवि के आकार के कारण, वे झटकेदार हैं। क्या आप में से कोई भी विचार करता है कि छवियों पर इस झटके को कैसे रोकें, यदि सभी src एक ही समय में बदलते हैं?

आपके प्रयास

Answer 1

समस्या आप वर्णित मेरे लिए एक पूर्व लोड करने की समस्या की तरह ध्वनि नहीं करता है।

प्रीलोडिंग के लिए, जब आप सर्वर से दूसरी छवि लोड करते हैं तो एक बार जब आप इसे स्थानांतरित करना शुरू करते हैं। लेकिन जैसे मैंने आपका प्रश्न पढ़ लिया है, आप डीओएम-ऑब्जेक्ट को एसआरसी में अपनी छवि के साथ ले जा रहे हैं।

यही सबसे अधिक संभावना एक ब्राउज़र मुद्दा है, का कहना है कि 100 x 100 कुछ महंगा प्रक्षेप सामान वहाँ क्या करना है की सुविधा देता है क्योंकि वह 2k एक्स 2k से अपनी छवियों नीचे पैमाने पर करने के है। तो आपकी मुख्य समस्या, जैसा कि आपने बताया है, छवि का आकार।

यहां तक ​​कि पहले से लोड होने काम का हो नहीं है, क्योंकि आप एक ही मुद्दों तो होगा। एक छोटा सा एक (आकार आप के चारों ओर खींचना चाहते हैं) और एक बड़ा एक, एक आप प्रदर्शित करना चाहते:

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

मुझे आशा है कि मैं अपने आप को स्पष्ट कर दिया।

Answer 2

आपको बस इतना करना प्रीलोड करना कहा जाता है कोशिश कर रहे हैं के लिए महत्वपूर्ण के लिए धन्यवाद। हालांकि, आपको इस बारे में सावधानी से सोचना होगा कि आप यह कैसे करना चाहते हैं।

प्रीलोडिंग में छवि को img टैग ऑफ़-स्क्रीन में लोड करना शामिल है, लेकिन फिर भी डोम में। यह स्थानीय रूप से छवि को कैश करता है, जिसका अर्थ है कि अगली बार जब आप उसी स्रोत का उपयोग करने का प्रयास करेंगे, तो यह छवि (और इस प्रकार, झिलमिलाहट) के लिए सर्वर से पूछताछ के बजाय कैश से खींच जाएगा।

(new Image()).src="mysource.png"; 

क्या आप तय करना चाहते हैं है जब आप छवियों को लोड करना चाहते हैं:

एक छवि प्रीलोड करने के लिए एक सरल बात है। यदि आप उन्हें पहले लोड करते हैं, तो आप संभावित रूप से बहुत सारी बैंडविड्थ का उपयोग करेंगे। यदि आप उन्हें ऑन-क्लिक लोड करते हैं, तो आपको बफरिंग मिल जाएगी। संक्षिप्त छवि() फार्म के लिए रॉबिन LEBOEUF को

var i = new Image(); 
i.onload = function() { 
    console.log("Loaded"); 
} 
i.src = "mysource.png"; 

क्रेडिट:

आप इस प्रकार की जांच कर सकते हैं कि कोई छवि img टैग पर onload घटना वर्तमान का उपयोग कर भरी हुई है और यदि आवश्यक हो तो jQuery के भीतर लपेटा जाता है,।

Answer 3

टिप्पणियां देखें। आपको यह सुनिश्चित करना चाहिए कि छवियों को से पहले लोड किया गया है, आप उन्हें दिखाते हैं। इसे प्री-लोडिंग कहा जाता है और उदाहरण के लिए छुपी हुई छवियां प्राप्त करके प्राप्त करें (display:none का उपयोग न करें, लेकिन उन्हें ऑफस्क्रीन रख दें) जिसमें एसआरसी है जो आप चाहते हैं।

संपादित करें: @ सेबस्टियन द्वारा अधिक विस्तृत उत्तर देखें!

Answer 4

आप अपनी छवियों को पहले से लोड करने के लिए इस तरह एक समारोह का उपयोग कर सकते हैं:

function imagesPreload(){ 
    var imgArray = new Array("path/to/img1.jpg", "path/to/img2.jpg", "path/to/img3.jpg"); 
    for (var i=0; i<imgArray.length; i++) { 
     (new Image()).src = imgArray[i]; 
    } 
}